AngularJS |条件 Class 使用 ng-class

Question

我想对页面上的元素应用条件 class。

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

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

如果输入字段无效，这将应用无效的 class。我想在用户输入字段有效时应用“valid” class。

是否可以在同一行代码中实现？

这是一个 fiddle 示例：JSFIDDLE

Answer 1

您可以通过多种方式来实现，一种简单的方法是使用带有括号表示法的对象。

示例：-

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，但你也可以使用 class angular 添加输入（以及表单上的）即 ng-pristine/ng-dirty 因此您可以使用这些 class 名称定义规则以使其更具体。

例如：-

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

AngularJS | Conditional Class using ng-class