如何使用 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 :-

<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

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

$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>

Answer 2

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

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

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

How to filter specific role based username in drop down using angularjs?

html

angularjs

meanjs