AngularJS |使用ng-class的条件类

Question

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

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

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

如果输入字段无效，则应用无效类。我想在用户输入字段有效时应用＆＃34; 有效＆＃34; 类。

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

这是一个小提琴示例：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但是你也可以在输入上使用类角度添加（以及在表单上）即ng-pristine/ng-dirty因此您可以使用这些类名来定义规则，以使其更具体。

例如： -

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