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

Question

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

Hi all I want to filter KP role username in drop down.

• Please look at My plunker for reference.

• First I have created all Roles drop down then I created all username drop down as well.

• What I am exactly looking is role of kp users are John and Francis so i just want to filter these kp users in drop down.

• So I did a filter like:- | filter:user.roles == 'kp' it's not working for me so please help us.

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

My Filter select :-

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

My Data:-

$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

Add a method in your controller for filter like following:

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

And in you template use it:

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