Angular JSを使用した別のドロップダウン値に関連する最初のドロップダウン値のような値を取得する方法？

Question

角度jを使用して別の選択ドロップダウン値に関連する最初の選択ドロップダウン値のような値を取得するにはどうすればよいですか？

こんにちは、私は唯一のkpユーザーを取得するので、私は| filter:flterWithKpのようなフィルタを使用していたng-optionにMyPlunkerにし、2つのdrop down fieldsを作成しているすべての。

• まずドロップダウンリストkp userscategoriesであり、2つ目のドロップダウン・リストはkp usersです。

• 最初のドロップダウンでReligion & Cultureを選択すると、2番目のドロップダウンはカテゴリユーザーのみに基づいて表示されます。例えば

• ： - 私たちはMoral Ethicsとして選択し、リストの必須2番目のドロップダウン場合は最初のドロップダウン2.in我々はReligion & Cultureとして選択し、2つ目のドロップダウン・リストは「フランシス」を好む必要がある場合ダウン1.in最初のドロップ、 「ジェニファー・ダヴィド」のように。私は解決策を得たが、それは私のポータルで働いていない

• 参照用this MyPlunkerを確認してください、私は同じ答えをしたいと思い、...厳密解を知っているだけでなく、私のplunkerを更新してください

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

マイデータ： -

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

PlunkerのフィルタのHTMLを見てください。それは

filter:{roles: 'kp'} 

と

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

を使用しています。しかし、あなたは、コントローラのメソッドをフィルタリングする場合は、次の2つのフィルタのための2つのメソッドを記述する必要がありますまたはあなたがplunkerなどに使用することができますilter:flterWithKp

を使用します。

私はプラカードを更新しました。あなたはそれをチェックすることができます。

Working plunker