Question

我正在使用AngularJS生成一个表单来提交函数的参数。为了使其正常工作，我希望第二个select元素的可能选项依赖于第一个元素上绑定模型的当前值。

例如，第一个元素的选项表示在Days，Weeks或Months之间进行选择，作为在提交时生成的数据集的单位。我试图实现的行为是，当在第一个元素中选择给定值时，第二个元素的可用选项被限制为小于或等于第一个元素中所选单元的任何单位。

例如，如果我选择“天”作为一个单位，我选择分组的选项将仅限于“天”。如果我选择“Weeks”，则可用选项将扩展为“Days”和“Weeks”，对于选定的“Months”单位，所有3个选项都可用于分组。

下面是相关的html：

<div ng-app="app">
    <form ng-submit="generate(unit, groupby)" ng-controller="AppCtrl">View from the last:
        <select class="form-control" ng-model="range" ng-options="r for r in ranges"></select>
        <select class="form-control" ng-model="unit" ng-options="(units.indexOf(u)) as u + '(s)' for u in units"></select>Grouped by:
        <select class="form-control" ng-model="groupby" ng-options="units.slice(0, unit + 1).indexOf(g) as g for g in units.slice(0, unit + 1)"></select>
        <input type="submit" value="Get Data" />
    </form>
</div>

和随行的控制器：

app = angular.module('app', []);

app.controller('AppCtrl', function AppCtrl($scope, $http) {
    $scope.ranges = [1, 2, 3, 4, 5, 6];
    $scope.range = 3;
    // options for time units
    $scope.units = ["Day", "Week", "Month"];
    // selected unit
    $scope.unit = 0;
    // selected grouping
    $scope.groupby = 0;

    // bound to form submit
    $scope.generate = function (unit, groupby) {
        //...
    };
});

上面的代码运行良好，但有一个恼人的bug。考虑到为单位选择“月”并且为分组选择“周”的情况，当用户然后将单位的选择更改为不应将“周”作为有效选项的值，例如“ Days“，$ scope.groupby的值不会改变，允许用户能够提交本来应该是无效表单的内容。

有关于另一种方式的任何建议吗？

PS为ya http://jsfiddle.net/VCx4y/

做了一个小提琴

Answer 1

简单修复将在控制器中添加一个观察者

$scope.$watch('unit', function(oldValue, newValue){
    $scope.groupby = 0;
});

请参阅此answer以获取解释。

AngularJS select：基于当前表单状态限制ngOptions

1 个答案: