別のドロップダウンの選択値に基づいてドロップダウンのオプションをフィルタリングして表示します

Question

angularJSのng-optionsを使用して2つのドロップダウンを作成しました。ドロップダウンオプションは、2つの異なる配列type_namesとnamesによって設定されます。どちらの配列も要素としてオブジェクトを含んでいます。あなたはそれがtype: othersとだけ表示オプションをよように私は、2番目のドロップダウンでfilter:{type:'others'}を使用している見ることができるように、以下のHTMLコードの下

<div ng-app="myApp" ng-controller="myCtrl"> 

<select ng-model="selectedTypeName" ng-options="item.id as item.text for item in type_names"> 
</select> 

<select ng-model="selectedName" ng-options="item.id as item.text for item in names|filter:{type:'others'}"> 
</select> 

</div> 

<p>This example shows how to fill a dropdown list using the ng-options directive.</p> 

はAngularJSスクリプト

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
    $scope.type_names = [ 
     {id: '0', type: 'me', text: 'Master of Computer Engineering'}, 
     {id: '1', type: 'msc', text: 'Master of Computer Science'}, 
     {id: '2', type: 'others', text: 'Others'} 
    ]; 

    $scope.names = [ 
     {id: '', type: 'choose', text: 'Choose a Program'}, 
     {id: '0', type: 'msc', text: 'Masters - Information Systems Management'}, 
     {id: '1', type: 'msc', text: 'Masters - Software Engineering'}, 
     {id: '2', type: 'msc', text: 'Masters - Computer Security'}, 
     {id: '3', type: 'others', text: 'Bachelors of Computer Science'}, 
     {id: '4', type: 'others', text: 'Exchange Program'}, 
     {id: '5', type: 'others', text: 'Study Abroad'}, 
     {id: '6', type: 'others', text: 'Scientific Summer School'}, 
     {id: '7', type: 'others', text: 'French Summer School'}, 
     {id: '8', type: 'me', text: 'ME - Global IT Management'}, 
     {id: '9', type: 'me', text: 'ME - Software Development and Multimedia'}, 
     {id: '10', type: 'me', text: 'ME - Systems, Networks and Security'} 
    ]; 
}); 

です。次に、最初のドロップダウンで選択したオプションに基づいて、タイプ値（me、othersまたはmsc）を自動的にfilter:{type:'others'}に入力します。スケーラビリティと堅牢性のために、私はHTML（小枝）コードの中でif/else条件を使いたくありません。

注：私はSymfony2のでAngularJSを使用しようとしています（PHPフレームワーク）

任意のアイデア？

Answer 1

ソリューション1

あなたは、第二に、フィルタとしての最初のドロップダウンにタイプを使用することができます。

http://plnkr.co/edit/Bxr8I3tahgzRluI4TIaW?p=preview

<select ng-model="selectedTypeName" 
     ng-options="item.type as item.text for item in type_names"> 
</select> 
<select ng-model="selectedName" 
     ng-options="item.id as item.text for item in names|filter:{type:selectedTypeName}"> 
</select> 

何が起こっている：最初の代わりのid:textペアをドロップダウン、type:textペアが使用されます。したがって、最初のドロップダウンの値はtypeであり、idではありません。

---

ソリューション2

そして、あなたが最初のselectの値ではなくtypeとしてあなたidをしたい場合、あなたはそのためngChangeを使用することができます。

http://plnkr.co/edit/IjcbVzSSqan8FJ98yRqA?p=preview

<select ng-model="selectedTypeId" 
     ng-change="selectedType=(type_names|filter:{id:selectedTypeId})[0].type" 
     ng-options="item.id as item.text for item in type_names"> 
</select> 
<select ng-model="selectedName" 
     ng-options="item.id as item.text for item in names|filter:{type:selectedType}"> 
</select> 

を

何が起こっているのですか：最後のドロップダウンで異なるオプションが選択されると、selectedTypeが選択されたオプションのタイプに更新されます。これは、2番目のドロップダウンでデータをフィルタリングするために使用されます。

---

（あなたがやったように：others）をドロップダウン値をデフォルトすることができ、コントローラにモデル値を設定することで、：

$scope.selectedTypeId = '2'; 
$scope.selectedType = 'others'; 

Answer 2

シンプルなソリューションを。

デモ：Fiddle

これは、フィルタを使用して簡単に行うことができます。シンプルなトリック部分はfilter: {id: '!' + fruit2.id}

<select ng-model="fruit1.id" ng-options="x.id as x.value for x in fruits | filter: {id: '!' + fruit2.id}"> 
</select> 
<select ng-model="fruit2.id" ng-options="x.id as x.value for x in fruits | filter: {id: '!' + fruit1.id}"> 
</select> 

Inside Contollerです。

$scope.fruits = [ 
     {"id":"1","value":"Apple"}, 
     {"id":"2","value":"Banana"}, 
     {"id":"3","value":"Cherry"}, 
     {"id":"4","value":"Fig"}, 
     {"id":"5","value":"Grapes"} 
    ]; 
     $scope.fruit1.id = "1";