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];
    });
});

Answer 2

你的语法有点

  <select
        ng-options="num for num in numbers[selectedLetter]"
        ng-model="selectedNumber"></select>

DEMO

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

2 个答案: