Question

我有一个指令，它根据$ valid值在表单元素上设置CSS类。我想用一个单选按钮列表。集合中有多个单选按钮，但我只需要将指令添加到其中一个，因为a）它们都控制相同的模型和b）CSS最终将显示单个图像标记，我每个单选按钮列表只需要一次

这是一些HTML：

<div ng-app="myApp">
        <input required type="radio" ng-model="type" name="typeGroup" value="type1">Type 1
        <input add-validation-class required type="radio" ng-model="type" name="typeGroup" value="type2">Type 2
</div>

脚本：

angular.module('myApp', []).directive('addValidationClass', function() {

    return {
        require: '^ngModel',
        link: function($scope, $element, $attrs, $ngModel) {

            if (!$ngModel) return;

            var update = function () {
                alert($ngModel.$dirty);
                $element
                    .removeClass()
                    .addClass($ngModel.$dirty ? ($ngModel.$valid ? 'valid' : '') : '');
            };

            $scope.$watch($attrs.ngModel, function (newValue, oldValue) {
                update();
            });
        }
    };

});

小提琴：http://jsfiddle.net/JqBgs/

无论单击单选按钮，您都可以从小提琴中看到手表触发更新。这是我的预期，因为两个单选按钮控制相同的模型。但是，您也可以看到左侧单选按钮不脏。所以没有应用CSS类。

为什么不脏？

Answer 1

我把它放在HTML中：

<div ng-app="myApp">
        <input ng-change="myForm.validateRadio.$dirty = true" required type="radio" ng-model="type" name="typeGroup" value="type1">Type 1
        <input name="validateRadio" add-validation-class required type="radio" ng-model="type" name="typeGroup" value="type2">Type 2
</div>

Angular中的一个荒谬的错误。

验证单选按钮列表

1 个答案: