0

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

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

例如，如果我选择“天”作为单位，那么可供我选择分组的选项将仅限于“天”。如果我选择“周”，可用选项将扩展到“天”和“周”，并且对于选定的“月”单位，所有 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) {
        //...
    };
});

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

对另一种解决方法有什么建议吗？

PS为你做了一个小提琴http://jsfiddle.net/VCx4y/

4

1 回答 1

0

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

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

请参阅此答案以获取说明。

于 2013-08-02T21:06:30.217 回答