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

＆＃34;正确的方式＆＃34;是非常主观的。这只是更大的字母，数字和颜色集合的一个较小的例子吗？这是您可以接近的一种方式，您不必创建一大堆显示或隐藏的<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>

使用Angular中的ng-repeat进行动态下拉列表

2 个答案: