具有 4 个选择选项的 Angularjs 链式选择在更改时为空

Angularjs chained select with 4 select options make empty on change

本文关键字：选择选项 Angularjs 具有更新时间：2023-09-26

我有以下问题：当我实现一个链式选择时，例如 4 个选择并更新第二个，第三个为空，但第四个保留值。这里有一个jsfiddle的链接，其中包含我用来进行链式选择的策略（这个小提琴不是我做的！

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

选择老爷车
精选 1948 保时捷 356-A 敞篷跑车
选择颜色
选择红色
选择 1949 捷豹 XK 120

现在你看到第四个选择没有变空你怎么能让那个空的？

网页部分：

<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
          }
        ]
      }
    ];
}

当选择新的选择值时，它只是更改链接到该选择框的模型变量，其余部分保持不变。因此，尽管为 categoryItem 选择了新值，subChild仍然保留以前选择的任何值的值，并且第四个选择框从中构建其选项的正是此值，从而保留了这些值。使用前 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
    }
}