AngularJS select: limit ngOptions на основе текущего состояния формы

Question

Я использую AngularJS для создания формы для представления аргументов функции. Чтобы это нормально работало, я хочу, чтобы возможные опции для второго элемента выбора зависели от текущего значения связанной модели для первого элемента.

Например, параметры для первого элемента представляют собой выбор между днями, неделями или месяцами как единицы для набора данных, которые будут сгенерированы при отправке. Поведение, которое я пытаюсь реализовать, состоит в том, что, когда заданное значение выбрано в первом элементе, параметры, доступные для второго элемента, ограничены любым единицей, которая меньше или эквивалентна выбранному устройству в первом элементе.

Например, если бы я выбрал «Дни» в качестве единицы измерения, то варианты, доступные мне для выбора группировки, будут ограничиваться только «Днями». Если бы я выбрал «Недели», доступные варианты расширились бы до «Дней» и «Недели», а для выбранной единицы «Месяцев» все три варианта были бы доступны для группировки.

Heres соответствующий 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) { 
     //... 
    }; 
}); 

Приведенный выше код работает достаточно хорошо, но с одной досадной ошибкой. Учитывая случай, когда для единиц выбрано «Месяцы», а для группировки выбрано «Недели», когда пользователь затем меняет выбор для единиц на значение, которое не должно иметь «Недели» в качестве допустимого параметра, например, Days ", значение $ scope.groupby не изменяется, что позволяет пользователю иметь возможность отправлять то, что в противном случае должно быть недопустимой формой.

Любые предложения по другому пути?

PS сделал скрипку Я. http://jsfiddle.net/VCx4y/

Answer 1

Простой исправить будет добавить Бодрствующего в контроллере

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

Пожалуйста, обратитесь к этому answer для объяснения.