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>

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

$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-option

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

Answer 2

下拉列表正常且正确地工作。您json对象[{"red": "100"}, {"pink": "101"}]中的问题。

下拉列表可用作来源object或array。

所有可能的选项下拉列表使用，请参阅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中的动态下拉选择不起作用

2 个答案: