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

我正在练习 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>

在我的控制器中，我有这样的列表

$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"}]。

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

更改您的颜色对象，例如

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>