Angularのng-repeatを使用したダイナミックドロップダウン

Question

私のアプリケーションでは、複数のドロップダウンメニューから選択するオプションがあり、前の2つのメニューからの選択に応じて3番目のメニューが動的になります。

私は私のコントローラでこの

// First dropdown menu 
<select ng-model="letter" class = "form-control"> 
    <option ng-repeat= "letter in letters" value = "letter">{{letter}}</option> 
</select> 

<br> 

// second dropdown menu 
<select ng-model="number" class = "form-control"> 
    <option ng-repeat = "number in numbers" value = "number">{{number}}</option> 
</select> 

<br> 

// third dropdown menu 
<select ng-model="color" class="form-control"> 
    <option ng-repeat="A1_color in A1_colors" ng-if= "letter = A & number = 1" value="{{A1_color}}">{{A1_color}}</option> 
</select> 

... 

<select ng-model="color" class="form-control"> 
    <option ng-repeat="B2_color in B2_colors" ng-if= "letter = B & number = 2" value="{{B2_color}}">{{B2_color}}</option> 
</select> 

のような条件を設定するために、ユーザが選択した場合、私は「だから、この

$scope.letters = {'A', 'B'}; 
$scope.numbers = {'1', '2'}; 

$scope.A1_colors = {'red', 'pink'}; 
$scope.A2_colors = {'blue', 'black'}; 
$scope.B1_colors = {'yellow', 'orange'}; 
$scope.B2_colors = {'white', 'black'}; 

のようなリストを持っているngのリピートとあればNGを、使用していますA '、2番目のメニューから' 2 'を選択すると、3番目のメニューで' A2_colors 'のオプションが表示されます。これを行う正しい方法は何ですか？

Answer 1

「正しい方法」はかなり主観的です。これは、文字、数字、色のより大きなコレクションとなるもののほんの小さな例ですか？表示または非表示にする<select></select>要素を一括して作成する必要がない、ここでアプローチできる方法の1つです。

JS：

angular.module('app', []) 
    .controller('ctrl', function($scope) { 
     $scope.letters = ['A', 'B']; 
     $scope.numbers = ['1', '2']; 
     var colors = { 
      'A1': ['red', 'pink'], 
      'A2': ['blue', 'black'], 
      'B1': ['yellow', 'orange'], 
      'B2': ['white', 'black'] 
     }; 

     $scope.colorSelection = []; 

     $scope.setColorSelection = function() { 
      if ($scope.selectedLetter && $scope.selectedNumber) { 
       $scope.colorSelection = 
        colors[$scope.selectedLetter + $scope.selectedNumber]; 
      } 
     } 
    }); 

HTML：

<div ng-app="app" ng-controller="ctrl"> 
    <select ng-model="selectedLetter" 
      ng-change="setColorSelection()" 
      ng-options="letter as letter for letter in letters"> 
    </select> 
    <select ng-model="selectedNumber" 
      ng-change="setColorSelection()" 
      ng-options="number as number for number in numbers"> 
    </select> 
    <select ng-model="selectedColor" 
      ng-if="colorSelection.length" 
      ng-options="color as color for color in colorSelection"> 
    </select> 
</div> 

Answer 2

が、私は、角が他のディレクティブNG-オプションが用意されていたときに、なぜ<select>タグにNG・リピートを使用するように、と思います。 ng-repeatの代わりにng-optionsを使用する必要があります。決して少なくても、ng-repeatを使うこともできますが、標準的なコーディングを行うのは良い方法ではありません。 NG-optionsの

構文：次のコードで

<select ng-model="item" 
     ng-options="item as item for item in collection"> 
</select> 

あなたの問題を解決しますが：

<div ng-app="MyApp" ng-controller="ctrl"> 
    <select ng-model="letter" 
      ng-options="letter as letter for letter in letters"> 
    </select> 
    <select ng-model="number" 
      ng-options="number as number for number in numbers"> 
    </select> 
    <select ng-model="color" 
      ng-options="color as color for color in colors"> 
    </select> 
</div>