如何获得像第一个下拉值相关的价值另一个下拉值使用Angular JS？ [英] How to Get the Value Like First Drop Down Value Related to Another Drop Down Value using of Angular JS?
问题描述
如何获得像第一个选择下拉值相关的另一个选择下拉值使用角度js？
大家好我创建了两个<$ c在 MyPlunker 中输入$ c>下拉字段 ng-option 我使用了像 |这样的过滤器filter：flterWithKp 因为只能获得 kp 用户。
- 第一个下拉列表是
kp用户类别，第二个下拉列表是kp用户。 -
我在看的是如果我们选择
Religion&文化在第一个下拉菜单中，第二个下拉菜单应该仅基于用户类别显示。 例如： - 1.in如果我们选择 -
请检查这个MyPlunker 作为参考，我得到了解决方案，但它并没有在我的门户网站工作，我想同样的答案，请更新我的plunker以及知道确切的解决方案...
宗教&文化，第二个下拉列表必须与'弗朗西斯'一样，2.如果我们选择道德伦理并且第二个下拉列表名单必须像'jennifer david'。 我的Html
< div>
< p>< / p>
< lable> Kp用户类别< / lable>
< / select>
< / div>
< div>
< lable> Kp用户< / lable>
< select ng-model =Filterkpng-change =newClass = Filterkp.usernameng-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，
角色：[school_student]，
类别：[
宗教与文化，
道德伦理
]，
lastName：kumar，
firstName：sarawana
}，
{
_id：59ed8a1fd80e55a8100d51f0，
displayName： selvam mani，
provider：local，
username：Francis，
roles：[kp]，
类别：[宗教&文化]，
lastName：mani，
firstName：selvam
}，
{
_id：59ed87cdd80e55a8100d51ef，
displayName：jennifer david，
provider：local，
username：jennifer david，
roles：[kp ]，
categories：[道德伦理]，
lastName：david，
firstName：jennifer
}，
{
_id：59e09811a7319ae81feed177，
displayName：ahamed nizar，
provider：local，
username：ahamednizar，
created：2017-10-13T10：40：17.142Z，
roles：[kp]，
categories：[Religion&文化]，
lastName：nizar，
firstName：ahamed
}，
{
_id：59df6a76b6748bc809050697，
displayName：Maniselvam selvam，
provider：local，
username：David，
roles：[admin] ，
categories：[道德伦理]，
lastName：selvam，
firstName：Maniselvam
}
$ scope.flterWithKp = function（item）{
console.log（item）;
return item.roles.indexOf（'kp'）> = 0;
}
< div>
< p>< / p>
< lable> Kp用户类别< / lable>
< select ng-model =filter.Filtercategorieskpng-options =item 。用户的项目的类别|过滤器：{角色：'kp'}>
< / select>
< / div>
< div>
<标签>
< select ng-model =Filterkpng-change =newClass = Filterkp.usernameng-options =item.username for item in users |过滤器：{categories：filter.Filtercategorieskp.categories，roles：['kp']}>
< / select>
< / div>
查看Plunker过滤器的HTML，它使用
filter：{roles：'kp'}
和
过滤器：{categories：filter.Filtercategorieskp.categories，roles：['kp']
但是您使用 ilter：flterWithKp
如果您想要要使用控制器的方法进行过滤，您必须为两个过滤器编写两个方法，或者您可以像使用plunker一样使用。
我已经更新了plunker，您可以检查它：
p>
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 userscategoriesand second drop down list iskp users. What I am looking is if we select
Religion & Culturein 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 & Cultureand the second drop down list must like 'Francis', 2.in first drop down if we select asMoral Ethicsand 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:
这篇关于如何获得像第一个下拉值相关的价值另一个下拉值使用Angular JS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
