如何使用 angularjs 在下拉列表中过滤基于特定角色的用户名？

Question

如何使用 Angular js 在下拉列表中过滤基于特定角色的用户名？

大家好，我想在下拉列表中过滤KP 角色用户名。

• 请参考My plunker。

• 首先我创建了all Roles drop down 然后我还创建了all username 下拉菜单。

• 我正在寻找的是kp 用户的角色是John and Francis，所以我只想在下拉列表中过滤这些kp 用户。

• 所以我做了一个过滤器，如：- | filter:user.roles == 'kp' 这对我不起作用，所以请帮助我们。

我的 HTML:-

    <div>
  <p>There are various of roles are available like:-</p>
    <p><b>[admin,school_student,block,kp]</b>.</p>
      <label>1. All Roles </label>
        <select ng-model="Filterkp"  ng-options="item.roles for item in users">
        </select>
</div>

<div>
  <label>2. All Roles User Name</label>
   <select ng-model="Filterkp"  ng-options="item.username for item in users">
   </select>
</div>


<div>
  <p>3. How to filter roles of KP username in this dropdown</p>
   <lable>I tried filter like :- <b>| filter:user.roles == 'kp'</b></lable>
   <select ng-model="Filterkp"  ng-options="item.username for item in users | filter:user.roles == 'kp'">
  </select>
</div>

我的过滤器选择：-

<select ng-model="Filterkp"  ng-options="item.username for item in users | filter:user.roles == 'kp'">

我的数据：-

$scope.users = [
  {
    "_id": "5a12ab443cb3837415229d2e",
    "displayName": "Avinaash Kumar",
    "username": "John",
    "created": "2017-11-20T10:15:32.747Z",
    "roles": ["kp"],
    "categories": [
      "Religion & Culture",
      "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",
      "Moral Ethics"
    ],
    "lastName": "mani",
    "firstName": "selvam"
  },
  {
    "_id": "59ed87cdd80e55a8100d51ef",
    "displayName": "jennifer david",
    "provider": "local",
    "username": "jennifer david",
    "roles": ["block"],
    "categories": [
      "Moral Ethics"
    ],
    "lastName": "david",
    "firstName": "jennifer"
  },
  {
    "_id": "59e09811a7319ae81feed177",
    "displayName": "ahamed nizar",
    "provider": "local",
    "username": "ahamednizar",
    "created": "2017-10-13T10:40:17.142Z",
    "roles": ["change_agent"],
    "categories": [
      "Religion & Culture"
    ],
    "lastName": "nizar",
    "firstName": "ahamed"
  },
  {
    "_id": "59df6a76b6748bc809050697",
    "displayName": "Maniselvam selvam",
    "provider": "local",
    "username": "David",
    "roles": ["admin"],
    "categories": [
      "Religion & Culture",
      "Moral Ethics"
    ],
    "lastName": "selvam",
    "firstName": "Maniselvam"
  }

Answer 1

像这样更改您的 ng-option 代码。

 <select ng-model="Filterkp"  ng-options="item.username for item in users | filter:{roles: 'kp'}">
  </select>

Answer 2

在控制器中添加一个过滤方法，如下所示：

$scope.flterWithKp = function(item){
  console.log(item);
  return item.roles.indexOf('kp') >= 0;
}

在你的模板中使用它：

<div>
  <p>3. How to filter roles of KP username in this dropdown</p>
   <lable>I tried filter like :- <b>| filter:user.roles == 'kp'</b></lable>
   <select ng-model="Filterkp"  ng-options="item.username for item in users | filter:flterWithKp">
  </select>
</div>