AngularJS 中的动态下拉菜单 select 不工作

Question

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

我的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);
    }
}

因此，如果用户 selects '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-option

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

Answer 2

Dropdown 正常工作。您的 json 对象 [{"red": "100"}, {"pink": "101"}].

中的问题

下拉菜单 可用作源 object，或 array.

所有可能的选项dropdown使用，见documentation.

我认为有两种方法可以改变你的 json:

将其转换为对象数组。
使用键将其转换为单个对象。

第一种方式：

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

第二种方式：

var colors = {
 'A1': {"red": "100","pink": "101"}
};

参见 jsfiddle;

上的示例

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope) {
    $scope.letters = ['A', 'B'];
    $scope.numbers = ['1', '2'];

    var colorsByArray = {
      'A1': [{
        "color": "red",
        "code": "100"
      }, {
        "color": "pink",
        "code": "101"
      }]
    };
    var colorsByObject = {
      'A1': {
        "red": "100",
        "pink": "101"
      }
    };

    $scope.colorSelection = [];

    $scope.setColorSelection = function() {
      if ($scope.selectedLetter && $scope.selectedNumber) {
        $scope.colorSelectionByArray = colorsByArray[$scope.selectedLetter + $scope.selectedNumber];
        $scope.colorSelectionByObject = colorsByObject[$scope.selectedLetter + $scope.selectedNumber];
      }
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">
    Choose 'A'
    <select ng-model="selectedLetter" ng-change="setColorSelection()" ng-options="letter as letter for letter in letters">
    </select>
    <br>Choose '1'
    <select ng-model="selectedNumber" ng-change="setColorSelection()" ng-options="number as number for number in numbers">
    </select>

    <br>

    <h3>
    IterateByArray   
    </h3>
    <select ng-model="selectedColor" ng-options="color.code as color.color for color in colorSelectionByArray">
    </select>
    <h3>
    IterateByObject    
    </h3>
    <select ng-model="selectedColor" ng-options="v as k for (k, v) in colorSelectionByObject">
    </select>
  </div>
</div>

AngularJS 中的动态下拉菜单 select 不工作

Dynamic dropdown select in AngularJS not working

angularjs

drop-down-menu

angularjs-scope

angularjs-ng-repeat

ng-options