javascript - 如何根据 AngularJS 中另一个选择中的选择索引更改选择标签的内容？

Question

我有以下内容:

$scope.letters = ['A', 'B', 'C', 'D'];
$scope.numbers = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11], [12, 13, 14, 15]];
$scope.selectedLetter = 0;

我还有两个选择标签。第一个选择标签由字母中的选项填充。我希望第二个选择标签的选项是与所选字母的索引相对应的子数组。因此，当我在第一个选择标签中选择“B”时，我希望第二个选择标签具有选项 [4, 5, 6, 7]。我还希望第二个选择标签顶部没有空白，并从列表中选择第一个选项作为默认值。

这是我到目前为止在 jsfiddle 中得到的内容:http://jsfiddle.net/yhk138au/

我一直在浏览 AngularJS 文档，似乎使用 $watch 可能与这里相关，但我是 Angular 的新手，不确定在这种情况下如何正确使用它。任何帮助或提示将不胜感激。

<div ng-app="myapp">
    <fieldset ng-controller="FirstCtrl">
        <select 
            ng-options="letters.indexOf(l) as l for l in letters"
            ng-model="selectedLetter"></select>
        <select
            ng-options="for num in numbers[selectedLetter]"
            ng-model="selectedNumber"></select>
        {{ selectedLetter }} {{ selectedNumber }}
    </fieldset>
</div>

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
    $scope.letters = ['A', 'B', 'C', 'D'];
    $scope.numbers = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11], [12, 13, 14, 15]];
    $scope.selectedLetter = 0;
});

Answer 1

看来您就在那里，您只需要一个 $watch设置第二个选择菜单的初始值并更正第二个 ng-options 的语法属性。

观看:

$scope.$watch('selectedLetter', function(idx) {
   $scope.selectedNumber = $scope.numbers[idx][0];
});

正确语法:

ng-options="num for num in numbers[selectedLetter]"

Live demo.

<div ng-app="myapp">
    <fieldset ng-controller="FirstCtrl">
        <select 
            ng-options="letters.indexOf(l) as l for l in letters"
            ng-model="selectedLetter"></select>
        <select
            ng-options="num for num in numbers[selectedLetter]"
            ng-model="selectedNumber"></select>
        {{ selectedLetter }} {{ selectedNumber }}
    </fieldset>
</div>

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
    $scope.letters = ['A', 'B', 'C', 'D'];
    $scope.numbers = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11], [12, 13, 14, 15]];
    $scope.selectedLetter = 0;
    $scope.$watch('selectedLetter', function(idx) {
       $scope.selectedNumber = $scope.numbers[idx][0];
    });
});