如何使用angular js获得与另一个选择下拉值相关的优先选择下拉值等值?
大家好,我已经drop down fields在MyPlunker中创建了两个,并在中ng- option使用了过滤器,| filter:flterWithKp因为仅获得了kp用户。
drop down fields
ng- option
| filter:flterWithKp
kp
kp users
categories
我正在寻找的是,如果我们Religion & Culture在第一个下拉列表中选择,则第二个下拉列表应仅基于类别用户显示。
Religion & Culture
例如:1.在第一个下拉列表中,如果我们选择as Religion & Culture,并且第二个下拉列表必须像’Francis’; 2.in在第一个下拉列表中,如果我们选择as Moral Ethics,并且第二个下拉列表必须像’jennifer david’。
Moral Ethics
请检查此MyPlunker以供参考,我已找到解决方案,但它在我的门户网站中不起作用,我想要相同的答案,也请更新我的监听器,以了解确切的解决方案…
我的HTML
<div> <p></p> <lable>Kp Users categories</lable> <select ng-model="Filtercategorieskp" ng-options="item.categories for item in users | filter:flterWithKp"> </select> </div> <div> <lable>Kp Users</lable> <select ng-model="Filterkp" ng-change="newClass=Filterkp.username" ng-options="item.username for item in users | filter:flterWithKp"> </select> </div>
我的数据:
$scope.users = [ { "_id": "5a12ab443cb3837415229d2e", "displayName": "Avinaash Kumar", "username": "John", "created": "2017-11-20T10:15:32.747Z", "roles": ["kp"], "categories": ["Environment & and Health"], "lastName": "Kumar", "firstName": "Avinaash" }, { "_id": "5a12a7343cb3837415229d2d", "displayName": "sarawana kumar", "provider": "local", "username": "Henry", "roles": ["school_student"], "categories": [ "Religion & Culture", "Moral Ethics" ], "lastName": "kumar", "firstName": "sarawana" }, { "_id": "59ed8a1fd80e55a8100d51f0", "displayName": "selvam mani", "provider": "local", "username": "Francis", "roles": ["kp"], "categories": ["Religion & Culture"], "lastName": "mani", "firstName": "selvam" }, { "_id": "59ed87cdd80e55a8100d51ef", "displayName": "jennifer david", "provider": "local", "username": "jennifer david", "roles": ["kp"], "categories": ["Moral Ethics"], "lastName": "david", "firstName": "jennifer" }, { "_id": "59e09811a7319ae81feed177", "displayName": "ahamed nizar", "provider": "local", "username": "ahamednizar", "created": "2017-10-13T10:40:17.142Z", "roles": ["kp"], "categories": ["Religion & Culture"], "lastName": "nizar", "firstName": "ahamed" }, { "_id": "59df6a76b6748bc809050697", "displayName": "Maniselvam selvam", "provider": "local", "username": "David", "roles": ["admin"], "categories": ["Moral Ethics"], "lastName": "selvam", "firstName": "Maniselvam" } $scope.flterWithKp = function(item){ console.log(item); return item.roles.indexOf('kp') >= 0; }
<div> <p></p> <lable>Kp Users categories</lable> <select ng-model="filter.Filtercategorieskp" ng-options="item.categories for item in users | filter:{roles: 'kp'}"> </select> </div> <div> <lable>Kp Users</lable> <select ng-model="Filterkp" ng-change="newClass=Filterkp.username" ng-options="item.username for item in users | filter:{ categories: filter.Filtercategorieskp.categories, roles:['kp']}"> </select> </div>
查看Plunker过滤器的HTML。它用
filter:{roles: 'kp'}
和
filter:{ categories: filter.Filtercategorieskp.categories, roles:['kp']
但是你用 ilter:flterWithKp
ilter:flterWithKp
如果要使用控制器的方法进行过滤,则必须为两个过滤器编写两个方法,或者可以像plunker一样使用。
我已经更新了塞子。您可以检查一下:
工作塞