NG重复列表下拉菜单来过滤另一个列表下拉

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"]

来源

2016-06-10 Jordan.J.D

我是新来的角度使猜测，但东西是一个数组，所以你想通过数组重复，如： items.temuff | filter：itemFilter“value =”{{item}}“> {{item}} 试试看，看它是否有效。 –

如果您需要使用IE 9支持，您可以为动态选择自己做好准备） –

一种方法是使用方法进行过滤，并在第一个下拉列表的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>

Here is a fully working Plunkr

来源

2016-06-10 22:19:22 fahadash

工作完美谢谢。 –

NG重复列表下拉菜单来过滤另一个列表下拉

回答

相关问题