Question

对于相同的整数数组，我有两个角度下拉列表，例如1,2,3,4,5。第一个应该显示源数组中的所有数字。第二个应该只显示小于第一个选择的数字。

    <select ng-model="model.IndexNumber" ng-options="k as v for (k,v) in model.Numbers" ng-change="onChange()"/>
    <select ng-model="model.IndexLessThan" ng-options="k as v for (k,v) in $scope.LessThanNumbers" ng-disabled="$scope.LessThanNumbers===null"/>

以下是我对onChange的javascript的看法：

    $scope.onChange = function() {
    if ($scope.model.IndexNumber != null) {
        $scope.LessThanNumbers = [];
        for (var i = 0; i < $scope.model.Numbers.length; i++) {
            if (i < $scope.model.IndexNumber) {
                $scope.LessThanNumbers.push($scope.model.Numbers[i]);
            }
            $scope.$apply();
        }
    }
}

我的LessThanNumbers数组被正确填充。但我有第二个选择更新来自它的选项的问题。在第一次选择之前，我也无法禁用第二个选择。我不知道我在这里缺少什么。棱角分明的我很新。任何帮助将不胜感激。

Answer 1

避免使用html标记上的“$ scope”

<select ng-model="model.IndexLessThan" ng-options="k as v for (k,v) in LessThanNumbers" ng-disabled="LessThanNumbers===null">

Answer 2

标记中存在错误。您需要关闭<select>个元素。此外，不要使用$scope为模型变量添加前缀，它是从Angular表达式的上下文中隐含的。最后，第二个ng-options定义（k as as v）中存在拼写错误。这是正确的版本（demo）：

<select ng-model="model.IndexNumber" 
    ng-options="k as v for (k,v) in model.Numbers" 
    ng-change="onChange()"></select>
<select ng-model="model.IndexLessThan" 
    ng-options="k as v for (k,v) in LessThanNumbers" 
    ng-disabled="LessThanNumbers == null"></select>

仅供参考，Angular方式是在model.Numbers上使用过滤器，如fiddle所示。这将允许您利用在第一个下拉列表中选择数字时出现的摘要阶段，从而避免不必要的事件管道。

AngularJS：两个选择，第二个选择的选项应首先是选项的子集

2 个答案: