AngularJS | 使用ng-class的条件类

Question

我想将一个条件类应用于页面上的元素.

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

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

如果输入字段无效,则应用无效类.我想在用户输入字段有效时应用" 有效"类.

这可能是在同一行代码中实现的吗？

这是一个小提琴示例: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*/}