AngularJS |使用 ng-class 的条件类

我想将条件类应用于页面上的元素。

目前它正在使用以下代码：

ng-class="{ 'vfnz-form--error' : loginForm.username.$invalid  }

如果输入字段无效，这将应用无效类。我想申请“valid"用户输入字段有效时的类。

这可以在同一行代码中实现吗？

这是一个小提琴示例：JSFIDDLE

您可以通过多种方式做到这一点，一种简单的方法是使用带有括号表示法的对象。

例子：-

ng-class="{ true: 'vfnz-form--error', false : 'vfnz-form--good'  }[loginForm.username.$invalid]"

或者（因为它不能既无效又有效）：-

ng-class="{'vfnz-form--error' : loginForm.username.$invalid, 'vfnz-form--good' : loginForm.username.$valid}"

如果您只想在表单脏时才执行此操作，您可以添加条件来检查 $pristine/$dirty 但您也可以在输入上（以及表单上）使用 Angular 类添加，即ng-pristine/ng-dirty因此您可以使用这些类名定义规则以使其更加具体。

ex:-

.vfnz-form--error .ng-dirty.something{/*apply bad rules*/}