angularjs - AngularJS 中的动态下拉选择不起作用

Question

我正在练习 Angular，并希望为用户提供从 3 个下拉选择菜单中进行选择的选项。第三个菜单应该是动态的，具体取决于前两个菜单中的选择。

我的 html:

// First dropdown menu, static
<select ng-model="selectedLetter" ng-change="setColorSelection()" 
    ng-options="letter as letter for letter in letters">
</select>

<br>

// second dropdown menu, static
<select ng-model="selectedNumber" ng-change="setColorSelection()" 
    ng-options="number as number for number in numbers">
</select>

<br>

// third dropdown menu, should be dynamic
<select ng-model="selectedColor" 
    ng-options="color as color for color in colorSelection">
</select>

在我的 Controller 中，我有这样的列表

$scope.letters = ['A', 'B'];
$scope.numbers = ['1', '2'];

var colors = {
    'A1': [{"red": "100"}, {"pink": "101"}],
    'A2': [{"blue": "202"}, {"black": "203"}],
    'B1': [{"yellow": "304"}, {"orange": "305"}],
    'B2': [{"white": "406"}, {"black": "407"}]
};

$scope.colorSelection = [];

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

因此，如果用户从第一个菜单中选择“A”并从第二个菜单中选择“2”，他应该会在第三个菜单中看到“A2”的选项。

问题:目前，第三个菜单未填充。

当我执行 console.log($scope.colorSelection) 时，我在控制台中得到 [Object, Object] 而不是 [{"blue": "202"}, {"black": "203"}]。

此外，我只想显示菜单中的颜色，而不是与它们关联的数字。我能够使用(键，值)在 ng-repeat 中执行此操作，但不确定我将如何在 ng-options 中执行此操作。

Answer 1

像这样改变你的颜色对象

var colors = {
    'A1': [{"color": "Red", "code": "100"}, {"color":"pink", "code": "101"}]
};

和 ng 选项

<select ng-model="selectedColor" 
    ng-options="color.code as color.color for color in colorSelection">
</select>