有额外条件的角度脏检查

Question

I'm wanting to use ng-dirty to apply a style to form elements in an angular app; however, there is another condition I want to compare as well to determine if the dirty styling should be applied. In other words, apply the dirty styling if ng-dirty is true and another condition is true (scope.myVar != null or something like that).

I realize I can accomplish this with ng-class as well but wanted to know if there were alternates.

Answer 1

Instead of editing the ng-dirty class, I would add a conditional ng-class to your input field. In the case that you're checking your data ( myVar for example) is not null ( $scope.myVar != null ), I would do something along the lines of:

<input ng-model="myVar" ng-class="{ 'custom-condition' : myVar != null }"/>

Then, in your CSS, you would see if BOTH classes (ng-dirty, and your custom-condition ) were currently applied to the element.

// If both .ng-invalid and .custom-condition are applied:
.ng-dirty.custom-condition { 
    border: 1px solid red; 
}