AngularJS |使用ng类的条件类

我想对页面上的元素应用一个条件类

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

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

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

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

---

这里有一个小提琴的例子：

你可以用很多方法来做，一个简单的方法是使用带括号的对象

例如：-

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

或者（因为它不能同时无效和有效）：-

如果您只想在表单脏的情况下执行此操作，您可以添加yes条件来检查$pristine/$dirty，但您也可以在输入上（以及表单上）使用类angular add，即

ng pristine/ng dirty

，以便您可以使用这些类名定义规则，使其更具体

例：-

---

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

例如：-

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

或者（因为它不能同时无效和有效）：-

如果您只想在表单脏的情况下执行此操作，您可以添加yes条件来检查$pristine/$dirty，但您也可以在输入上（以及表单上）使用类angular add，即

ng pristine/ng dirty

，以便您可以使用这些类名定义规则，使其更具体

例：-

---

这是接近我想要的，唯一的事情是字段onload被设置为无效，没有用户输入值。这需要检查$pristine吗？是的，你可以检查$dirty，基本上你可以让你的css规则自己定义它。我可以通过添加&&来完成吗！loginForm.username.$dirty？这是正确的：{'vfnz form--error'：loginForm.username.$invalid&&！loginForm.username.$pristine'vfnz form--valid'：loginForm.username.$valid}是的，实际上我无法打开你的小提琴（事实上，我要说的是angular向输入中添加了一个类

ng dirty

，实际上您可以相应地编写css规则，而不是在ng类中再添加一个条件。例如，vfnz form--error.ng dirty.something{/*应用坏规则*/}这与我想要的很接近，唯一的问题是在用户未输入值的情况下，字段onload被设置为无效。是否需要检查$pristine？是的，您可以检查$dirty，基本上您可以让css规则本身定义它。我可以通过添加&！loginForm.username.$dirty来执行此操作吗？这是正确的：{'vfnz form--error'：loginForm.username.$invalid&&！loginForm.username.$pristine，'vfnz form--valid'：loginForm.username.$valid}是的，实际上我无法打开您的小提琴（事实上，我要说的是angular向输入中添加了一个类

ng dirty

，实际上您可以相应地编写css规则，而不是在ng类中再添加一个条件。例如，vfnz form--error.ng dirty.something{/*应用坏规则*/}

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