0

次の問題があります。たとえば、4 つの選択でチェーン選択を実装し、2 番目の選択を更新すると、3 番目の選択は空になりますが、4 番目の選択は値を保持します。これは、連鎖選択を行うために使用した戦略を含む jsfiddle へのリンクです (このフィドルは私が作成したものではありません!):

http://jsfiddle.net/pythondave/JUZDf/

  1. クラシックカーを選ぶ
  2. 選択 1948 ポルシェ 356-A ロードスター
  3. 色を選択
  4. 赤を選択
  5. 1949 ジャガー XK 120 を選択

これで、4 番目の選択が空にならないことがわかりました。どうすればそれを空にできますか?

HTML 部分:

<div ng-app ng-controller="SelectController">
 <select ng-model="category" ng-options="c.name for c in sampleProductCategories">    </select>
 <select ng-model="categoryItem" ng-options="p.name for p in category.products"></select>
 <select ng-model="subChild" ng-options="o.value for o in categoryItem.options"></select>
 <select ng-model="level4" ng-options="o.value for o in subChild.options"></select>

  <hr />
  category={{category.name}}<br/>
  product={{categoryItem.name}}<br/>
  subChild={{subChild.value}}<br/>
  level4={{level4.value}}<br/>

</div>

Javascript:

function SelectController($scope) {
    // Data taken from KnockoutJs cart example
    $scope.sampleProductCategories = [
      {
        "name": "Classic Cars",
          "products": [
          {
            "name": "1948 Porsche 356-A Roadster",
              "options":[
                  {"value": "Color",
                   "options":[
                  {"value": "Red"},
                  {"value":"Black"}
                  ],                                    
               },
                  {"value":"Seats",
                  "options":[
                  {"value": "Leather"},
                  {"value":"Cloth"}
                  ],    

                  },

                 {"value":"Warranty",
                  "options":[
                  {"value": "2 Year"},
                  {"value":"3 Year"}
                  ],    

                  } 

              ],
            "price": 53.9
          },
          {
            "name": "1948 Porsche Type 356 Roadster",
            "price": 62.16
          },
          {
            "name": "1949 Jaguar XK 120",
            "price": 47.25
          }
        ]

      },
      {
        "name": "Motorcycles",
        "products": [
          {
            "name": "1936 Harley Davidson El Knucklehead",
            "price": 24.23
          },
          {
            "name": "1957 Vespa GS150",
            "price": 32.95
          },
          {
            "name": "1960 BSA Gold Star DBD34",
            "price": 37.32
          }
        ]

      },
      {
        "name": "Planes",
          "products": [
          {
            "name": "1900s Vintage Bi-Plane",
            "price": 34.25
          },
          {
            "name": "1900s Vintage Tri-Plane",
            "price": 36.23
          },
          {
            "name": "1928 British Royal Navy Airplane",
            "price": 66.74
          },
          {
            "name": "1980s Black Hawk Helicopter",
            "price": 77.27
          },
          {
            "name": "ATA: B757-300",
            "price": 59.33
          }
        ]

      }
    ];
}
4

1 に答える 1

0

新しい選択値が選択されている場合、その選択ボックスにリンクされているモデル変数のみが変更され、残りは変更されません。したがって、 の新しい値を選択してもcategoryItem、subChild以前に選択した値の値を保持し、4 番目の選択ボックスがそのオプションを構築する元の値であるため、値が保持されます。最初の 3 つの選択ボックスのいずれを使用しても、同じ結果が表示されます。

ディレクティブを使用しng-changeて、選択ボックスの変更で関数を実行し、必要なスコープ変数をリセットできます。

<select ng-model="category" ng-change="update(select1)" ng-options="c.name for c in sampleProductCategories">    </select>
<select ng-model="categoryItem" ng-change="update(select2)" ng-options="p.name for p in category.products"></select>

次に、コントローラーで：

function SelectController($scope) {
    $scope.update = function (select) {
        // update the appropriate n-selectBoxNum scope variables here
    }
}
于 2013-11-06T21:33:19.153 に答える