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

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

例如，第一个元素的选项表示在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) { 
     //... 
    }; 
});

上面的代码工作得很好，但有一个恼人的错误。考虑到为单位选择“月”并且为分组选择“周”的情况，然后当用户将单位的选择改变为不应该具有“周”作为有效选项的值时，例如“天“时，$ scope.groupby的值不会改变，允许用户能够提交否则应该是无效的表单。

对此的另一种方式的任何建议？

PS制作提琴雅http://jsfiddle.net/VCx4y/

来源

2013-08-02 John Laws Harrison

简单的修补程序将在控制器

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

请参阅本answer的解释添加观察者。

来源

2013-08-02 21:06:30 zsong

好吧，我曾考虑过这个问题，但是想知道是否我不能直接用已经写入控制器的东西修复它，谢谢！ –

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

回答

相关问题