ng重復列表下拉列表以過濾另一個列表下拉列表

Question

我有兩個下拉列表，如下所示：

HTML

<div class="col-md-3">
    <select class="form-control"  ng-model="select1">
        <option value="" selected disabled>Select First</option>
        <option  ng-repeat="item in items" value="{{item.name}}">{{item.name}}</option>
    </select>
</div>
<div class="col-md-2">
    <select class="form-control"  ng-model="select2">
        <option value="" selected disabled>Select Second</option>
        <option ng-repeat="item in items|filter:itemFilter" value="{{item.stuff}}">{{item.stuff}}</option>
    </select>
</div>

我的items清單如下：

[
  {name:"foo1", stuff:["bar1","bar2","bar3"]},
  {name:"foo2", stuff:["bar4","bar5","bar6"]},
  {name:"foo3", stuff:["bar7","bar8","bar9"]}
]

調節器

 $scope.itemFilter = function (item) {
         return item.name == $scope.select1;
};

目的

當我從第一個下拉列表中選擇foo1 ，第二個下拉列表應具有3個選項bar1 ， bar2和bar3

當前

當我從第一個下拉列表中選擇foo1 ，第二個下拉列表包含一個選項["bar1","bar2","bar3"]

Answer 1

一種方法是使用一種方法進行過濾，然后在第一個下拉列表的ngChange上調用該過濾方法。

<select class="form-control"  ng-model="select1" ng-change="filterItems()">

這是過濾方法的定義

$scope.filterItems = function() {
  var index = 0;
  for (var i = 0; i < $scope.items.length; i++) {
    if ($scope.items[i].name == $scope.select1) {
      index = i;
      break;
    }
  }
  $scope.filteredItems = $scope.items[index].stuff;
};

並將第二個下拉列表綁定到過濾列表

<select class="form-control"  ng-model="select2">
    <option value="" selected disabled>Select Second</option>
    <option ng-repeat="item in filteredItems">{{item}}</option>
</select>

這是一個功能齊全的Plunkr