如何使用Angular JS获取与另一个下拉值相关的第一个下拉值之类的值? [英] How to Get the Value Like First Drop Down Value Related to Another Drop Down Value using of Angular JS?

问题描述

如何使用angular js获取与另一个选择下拉值相关的第一个选择下拉值之类的值?

大家好，我在 MyPlunker<中创建了两个 下拉字段/a> 并在 ng-option 中使用了像 | 这样的过滤器filter:flterWithKp 因为只获取 kp 用户.

• 第一个下拉列表是kp users categories，第二个下拉列表是kp users.

• 我正在寻找的是，如果我们选择 Religion &文化在第一个下拉菜单中，第二个下拉菜单应仅基于用户类别显示.

• 例如:- 1.在第一个下拉列表中，如果我们选择 Religion &Culture 和第二个下拉列表必须像'Francis'，2.如果我们选择Moral Ethics，则在第一个下拉列表中，第二个下拉列表必须像'jennifer david'.

• 请查看 这个 MyPlunker 以供参考我得到了解决方案，但它是不在我的门户中工作，我想要相同的答案，请更新我的 plunker 以了解确切的解决方案...

我的 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获取与另一个下拉值相关的第一个下拉值之类的值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！