AngularJS |使用 ng-class 的条件类答案

【问题标题】：AngularJS | Conditional Class using ng-classAngularJS |使用 ng-class 的条件类
【发布时间】：2015-02-02 01:22:18
【问题描述】：

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

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

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

如果输入字段无效，这将应用无效类。当用户输入字段有效时，我想应用一个“valid” 类。

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

这是一个小提琴示例：JSFIDDLE

【问题讨论】：

【解决方案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*/}

【讨论】：

这与我想要的很接近，唯一的事情是在没有用户输入值的情况下将字段 onload 设置为无效。这需要检查 $pristine 吗？
是的，你可以检查 $dirty，基本上你可以让你的 css 规则自己定义它。
我可以通过添加 && !loginForm.username.$dirty 来做到这一点吗？
这是正确的：{ 'vfnz-form--error' : loginForm.username.$invalid && !loginForm.username.$pristine, 'vfnz-form--valid' : loginForm.username. $有效}
是的，应该是，实际上我无法打开你的小提琴。 :(事实上我所说的是角度添加一个类ng-dirty到输入你实际上可以相应地编写你的css规则而不是在ng-class中添加一个条件。即.vfnz-form--error .ng-dirty .something{/*应用错误规则*/}