如何使用 Angular JS 获取第一个下拉值与另一个下拉值相关的值？

Question

如何使用 angular js 获取第一个 select 下拉值与另一个 select 下拉值相关的值？

大家好，我在 MyPlunker 中创建了两个 drop down fields 并在 ng-option 中使用了 | filter:flterWithKp 这样的过滤器，因为只得到 kp 用户。

第一个下拉列表是 kp users categories，第二个下拉列表是 kp users.
我在看的是，如果我们在第一个下拉列表中 select Religion & Culture，第二个下拉列表应该只显示基于类别的用户。
例如：- 1.in 第一个下拉列表如果我们 select 为 Religion & Culture 并且第二个下拉列表必须像 'Francis', 2.in 如果我们 select 为 Moral Ethics，则第一个下拉列表必须为 'jennifer david'.
请检查 this MyPlunker 以供参考我得到了解决方案，但它在我的门户中不起作用，我想要相同的答案，请更新我的 plunker 以及了解确切的解决方案.. .

我的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;
}

Answer 1

<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

如果你想用控制器的方法过滤，你必须为两个过滤器写两个方法，或者你可以像plunker一样使用。

我已经更新了 plunker。您可以查看：

Working plunker

如何使用 Angular JS 获取第一个下拉值与另一个下拉值相关的值？

How to Get the Value Like First Drop Down Value Related to Another Drop Down Value using of Angular JS?

html

angularjs

meanjs