Question

如何使用角度js中的下拉来获取与另一个相关的值？

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

第一个下拉列表为kp users categories，第二个下拉列表为kp users。
我看到的是，如果我们在第一个下拉列表中选择Religion & Culture，则第二个下拉列表应仅根据用户类别显示。
例如： - 1.如果我们选择Religion & Culture，首先下拉，第二个下拉列表必须像弗朗西斯＆＃39;，2。如果我们首先下降选择为Moral Ethics，第二个下拉列表必须像jennifer david＆＃39;。
请检查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

如何使用角度js选择与第二个下拉值相关的第一个下拉值的值？

1 个答案: