Angular

Question

ng-tekrar kullanarak dinamik açılır Uygulamam, kullanıcılara birkaç açılır menüden seçim yapma seçeneği sunar ve üçüncü menü, önceki iki menünün seçimine bağlı olarak dinamik olmalıdır.

Ben ng tekrarı ve kullanıyorum benim denetleyicisi bu

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

gibi koşulunu belirtmek için ng-eğer kullanıcı seçer Yani, ben 'bu

$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'}; 

gibi listeler var İkinci menüden ilk menüden '2' ve üçüncü menüde 'A2_colors' seçeneklerini görmelidir. Bunu yapmanın doğru yolu nedir?

Answer 1

"Doğru yol" oldukça özneldir. Bu daha büyük bir harf, sayı ve renk koleksiyonu olacak ne küçük bir örnek mi? Burada, gösterdiğiniz veya gizlediğiniz <select></select> öğesinin tamamını oluşturmak zorunda kalmayacağınız bir yaklaşım var.

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

ben açısal başka yönerge ng-seçenekler varken neden <select> etiketi için ng tekrarı kullanmak düşünüyorum. Ng-yerine ng-options kullanmalısınız. Asla daha az değil, aynı zamanda ng-repeat kullanabilirsiniz, ancak standart kodlama yapmak için iyi bir yol değildir. ng-seçenekleri için

dizimi: koduyla takip ederek

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

Kişisel sorunu çözmüş olacak:

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