validation - 用于验证的 AngularJS 自定义指令 - 输入取决于另一个

Question

在 AngularJS 应用程序中，我有两个下拉菜单，一个用于成人人数，另一个用于 child 人数。我需要验证 child 人数是否始终低于或等于成人人数。

我已经制定了一个自定义指令来验证这一点，当我改变 child 的数量时它工作正常，但当我改变成人的数量时我也需要它工作。

<select name="adults" ng-model="pax.adults" ng-options="v for v in options">
</select>
<select name="children" ng-model="pax.children" ng-options="v for v in options" children>

app.directive('children', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            var pax = scope.pax;
            ctrl.$parsers.unshift(function (viewValue) {
                ctrl.$setValidity('children', viewValue <= pax.adults);
                return viewValue;
            });
        }
    };
});

比如我有2个大人和3个 child ， child 的数量是无效的。如果我将 child 的数量更改为 2，它就会生效，但如果我将成人的数量更改为 3，则 child 验证不会被触发。

以 Angular 方式实现这一目标的最佳方法是什么？

这是一个 jsFiddle 说明我在做什么:http://jsfiddle.net/geZB5/

干杯，

Answer 1

好的，在 AngularJS google group 中找到了答案，只需要在成人值上添加一个 watch :

        scope.$watch('pax.adults', function(value) {
            ctrl.$setValidity('children', ctrl.$viewValue <= value);
        });

对应的jsFiddle:http://jsfiddle.net/4vfBf/