0

我有一个指令，它根据表单元素的 $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 类。

为什么不脏？

4

1 回答 1

0

我把它放在 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 中多么荒谬的错误。

于 2013-07-17T09:39:02.700 回答