在 Angular 中使用 ng-repeat 的动态下拉菜单

Question

我的应用程序为用户提供了从多个下拉菜单中进行选择的选项，第三个菜单应该是动态的，具体取决于前两个菜单中的选择。

我正在使用 ng-repeat 和 ng-if 来设置这样的条件

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

因此，如果用户从第一个菜单中选择“A”并从第二个菜单中选择“2”，他应该会在第三个菜单中看到“A2_colors”的选项。这样做的正确方法是什么？

Answer 1

我想，当 Angular 有另一个指令 ng-options 时，为什么要为 <select> 标签使用 ng-repeat。您应该使用 ng-options 而不是 ng-repeat。尽管如此，您也可以使用 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>

Answer 2

“正确的方式”是相当主观的。这只是更大的字母、数字和颜色集合的一个较小的例子吗？这是您可以使用的一种方法，您不必创建一大堆要显示或隐藏的 <select></select> 元素。

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>