ng Wiederholungsliste Dropdown-Liste auswählen, eine weitere Liste Dropdown

Question

Ich habe zwei Dropdown-Listen wie folgt aus:

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> 

meiner Liste der items wie folgt aussieht:

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

Steuerung

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

Ziel

Als ich foo1 aus dem ersten Dropdown auswählen, sollte die zweite Drop-Down-3 Optionen bar1, bar2, bar3

Aktuelle

Wenn ich foo1 aus der Auswahl Das erste Drop-Down-Menü enthält eine Option ["bar1","bar2","bar3"]

Answer 1

Eine Möglichkeit besteht darin, eine Methode zum Filtern zu verwenden und diese Filtermethode unter ngChange des ersten Dropdown-Menüs aufzurufen. Hier

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

ist die Definition der Filtermethode

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

und binden Ihre zweite Dropdown-Liste der gefilterten Liste

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

Here is a fully working Plunkr