如何使用 angular js 获取与第二个下拉值相关的第一个下拉值的值选择？

Question

如何在 angular js 中使用下拉菜单获取彼此相关的值？

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

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

我的Html

    <div>
  <p></p>
  <lable>Kp Users categories</lable>
   <select ng-model="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:{roles: 'kp'}">
  </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"
}

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>

并在 js 中添加

$scope.filter = {};

Example

如何使用 angular js 获取与第二个下拉值相关的第一个下拉值的值选择？

How to get values selecting of first drop down values related to second drop down values using angular js?

html

angularjs

meanjs