驗證單選按鈕列表

我有一個指令，基於它的$有效值在表單元素上設置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類不適用。

爲什麼不髒？

來源

2013-07-16 Ian Warburton

我把這個在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>

多麼荒謬的錯誤的角度。

來源

2013-07-17 09:39:02

驗證單選按鈕列表

回答

相關問題