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

Question

如何使用angular js获得与另一个选择下拉值相关的优先选择下拉值等值？

大家好，我已经drop down fields在MyPlunker中创建了两个，并在中ng- option使用了过滤器，| filter:flterWithKp因为仅获得了kp用户。

• 第一个下拉列表为kp users categories，第二个下拉列表为kp users。

• 我正在寻找的是，如果我们Religion & Culture在第一个下拉列表中选择，则第二个下拉列表应仅基于类别用户显示。

• 例如：1.在第一个下拉列表中，如果我们选择as Religion & Culture，并且第二个下拉列表必须像’Francis’； 2.in在第一个下拉列表中，如果我们选择as Moral Ethics，并且第二个下拉列表必须像’jennifer david’。

• 请检查此MyPlunker以供参考，我已找到解决方案，但它在我的门户网站中不起作用，我想要相同的答案，也请更新我的监听器，以了解确切的解决方案…

我的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一样使用。

我已经更新了塞子。您可以检查一下：

工作塞