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

时间:2013-07-08 11:51:15

标签: validation angularjs angularjs-directive

在AngularJS应用程序中,我有两个下拉菜单,一个是成人数,另一个是孩子数。我需要验证孩子的数量是否总是低于或等于成人人数。

我已经制作了一个自定义指令来验证这一点,当我改变孩子的数量时它可以正常工作,但是当我改变成人的数量时我也需要它才能工作。

<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名儿童,儿童人数无效。如果我将孩子的数量更改为2,它将变为有效,但如果相反我将成人数量更改为3,则子项验证不会被解雇。

以有角度的方式实现这一目标的最佳方法是什么?

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

干杯,

1 个答案:

答案 0 :(得分:1)

好的,在AngularJS google group中找到了答案,只需添加一张关于成人值的手表:

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

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