0

How to get values one related to another using drop down in 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:{roles: 'kp'} 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 MyPlunker for referrence and help us, 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:{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>

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"
}
R. Mani Selvam
  • 320
  • 8
  • 36

1 Answers1

0

I managed to make it work by:

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

and in the js just add

$scope.filter = {};

Example

Rafael Gil
  • 151
  • 3
  • Hi Rafael thanks for your answer i think it's looks perfect, will check and update you asap... and how to get `unique` categorie, for example:- in categories list there are `two` `Religion & Culture` is showing , so how to get unique `Religion & Culture`, like single `Religion & Culture`... if there are multiple `Religion & Culture` or other categories, we just want to show only `single or unique` category please help us thanks... – R. Mani Selvam Nov 23 '17 at 06:32
  • I have created unique categories drop down list as a question like:- https://stackoverflow.com/questions/47453677/how-to-get-unique-drop-down-value-instead-of-multiple-in-angular-js please check this also – R. Mani Selvam Nov 23 '17 at 10:51
  • If I understood correctly, you dont want to list Henry if Religion & Culture is selected because it has more than one category right? – Rafael Gil Nov 24 '17 at 15:26
  • I saw the duplicated value, just a minute for me to check it – Rafael Gil Nov 24 '17 at 15:32
  • that question already has an answer at https://stackoverflow.com/questions/15914658/how-to-make-ng-repeat-filter-out-duplicate-results – Rafael Gil Nov 24 '17 at 15:45
  • can you update this plunker :- http://plnkr.co/edit/m57w9lcLHmcWnpQEYZUL?p=preview as well with your above answer?... – R. Mani Selvam Nov 27 '17 at 07:57