How to Get the Value Like First Drop Down Value Related to Another Drop Down Value using of Angular JS?

Question

How to get the value like first select drop down value related to another select drop down value using of angular js?

Hi all I have created two drop down fields in MyPlunker and with in the ng-option I have used filter like | filter:flterWithKp because to get only the kp users.

• First drop down list are kp users categories and second drop down list is kp users.

• What I am looking is if we select Religion & Culture in first drop down, the second drop down should display only based on categories users.

• For example:- 1.in first drop down if we select as Religion & Culture and the second drop down list must like 'Francis', 2.in first drop down if we select as Moral Ethics and the second drop down list must like 'jennifer david'.

• Please check this MyPlunker for reference i got the solution but it's not working in my portal, i would like same answer , please update my plunker as well to know the exact solution...

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

My Data:-

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

Look at the HTML of Plunker's filter. it uses

filter:{roles: 'kp'}

and

filter:{ categories: filter.Filtercategorieskp.categories, roles:['kp']

But you use ilter:flterWithKp

If you want to filter with controller's method, you have to write two methods for two filter or you can use as like plunker.

I have update the plunker. You can check it:

Working plunker