![下拉 下拉](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了如何使用Angular JS获取与另一个下拉值相关的第一个下拉值之类的值?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何使用angular js获取与另一个选择下拉值相关的第一个选择下拉值之类的值?
大家好,我在 MyPlunker下拉字段/a> 并在 ng-option
中使用了像 | 这样的过滤器filter:flterWithKp
因为只获取 kp
用户.
我的 HTML
<p></p><lable>Kp 用户类别</lable><select ng-model="Filtercategorieskp" ng-options="item.categories for item in users | filter:flterWithKp"></选择>
<div><lable>Kp 用户</lable><select ng-model="Filterkp" ng-change="newClass=Filterkp.username" ng-options="item.username for item in users | filter:flterWithKp"></选择>
我的数据:-
$scope.users = [{"_id": "5a12ab443cb3837415229d2e","displayName": "阿维娜什·库马尔","用户名": "约翰","创建": "2017-11-20T10:15:32.747Z",角色":[kp"],"categories": ["环境与健康"],"lastName": "库马尔",名字":阿维纳什"},{"_id": "5a12a7343cb3837415229d2d","displayName": "sarawana kumar","提供者": "本地","用户名": "亨利",角色":[school_student"],类别":[《宗教与文化》,《道德伦理》],"lastName": "库马尔",名字":砂拉越"},{"_id": "59ed8a1fd80e55a8100d51f0","displayName": "selvam mani","提供者": "本地","用户名": "弗朗西斯",角色":[kp"],"categories": ["宗教与文化"],"lastName": "mani",名字":塞尔瓦姆"},{"_id": "59ed87cdd80e55a8100d51ef","displayName": "詹妮弗·大卫","提供者": "本地",用户名":詹妮弗·大卫",角色":[kp"],类别":[道德伦理"],"lastName": "大卫",名字":詹妮弗"},{"_id": "59e09811a7319ae81feed177","displayName": "艾哈迈德·尼扎尔","提供者": "本地","username": "ahamednizar","创建": "2017-10-13T10:40:17.142Z",角色":[kp"],"categories": ["宗教与文化"],"lastName": "尼扎尔",名字":艾哈迈德"},{"_id": "59df6a76b6748bc809050697","displayName": "Maniselvam 塞尔瓦姆","提供者": "本地","用户名": "大卫",角色":[管理员"],类别":[道德伦理"],"lastName": "塞尔瓦姆","firstName": "Maniselvam"}$scope.flterWithKp = function(item){控制台日志(项目);返回 item.roles.indexOf('kp') >= 0;}
解决方案
<p></p><lable>Kp 用户类别</lable><select ng-model="filter.Filtercategorieskp" ng-options="item.categories for item in users | filter:{roles: 'kp'}"></选择>
<div><lable>Kp 用户</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']}"></选择>
查看Plunker过滤器的HTML.它使用
filter:{roles: 'kp'}
和
filter:{ Categories: filter.Filtercategorieskp.categories, roles:['kp']
但是你使用 ilter:flterWithKp
如果你想用控制器的方法过滤,你必须为两个过滤器写两个方法,或者你可以像plunker一样使用.
我已经更新了plunker.你可以检查一下:
工作plunker
How to get the value like first select drop down value related to another select drop down value using of angular js?
Hi all I have created two drop down fields
in MyPlunker and with in the ng-option
I have used filter like | filter:flterWithKp
because to get only the kp
users.
- First drop down list are
kp users
categories
and second drop down list is kp users
. What I am looking is if we select Religion & Culture
in first drop down, the second drop down should display only based on categories users.
For example:- 1.in first drop down if we select as Religion & Culture
and the second drop down list must like 'Francis', 2.in first drop down if we select as Moral Ethics
and the second drop down list must like 'jennifer david'.
Please check this MyPlunker for reference i got the solution but it's not working in my portal, i would like same answer , please update my plunker as well to know the exact solution...
My 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>
My Data:-
$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>
Look at the HTML of Plunker's filter. it uses
filter:{roles: 'kp'}
and
filter:{ categories: filter.Filtercategorieskp.categories, roles:['kp']
But you use ilter:flterWithKp
If you want to filter with controller's method, you have to write two methods for two filter or you can use as like plunker.
I have update the plunker. You can check it:
Working plunker
这篇关于如何使用Angular JS获取与另一个下拉值相关的第一个下拉值之类的值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!