javascript - AngularJS:两个选择，第二个选择的选项应该是第一个选择的选项的子集

Question

对于同一个整数源数组，我有两个 Angular 下拉菜单，例如 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 数组已正确填充。 但我在第二个选择中使用其中的选项进行更新时遇到问题。 在进行第一个选择之前，我也无法禁用第二个选择。我不知道我在这里缺少什么。 我对 Angular 还很陌生。任何帮助将不胜感激。

Answer 1

您的标记中有错误。您需要关闭<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 所示。这将使您能够利用在第一个下拉列表中选择号码时发生的摘要阶段，从而避免不必要的事件管道。