ngClass 不工作？答案

【问题标题】：ngClass not working?ngClass 不工作？
【发布时间】：2015-03-14 04:30:20
【问题描述】：

我是 AngularJS 的新手，我知道 ngClass 指令可用于将类动态插入到元素中，例如：

<input ng-class="{some-class: condition, another-class: anotherCondition}">

Angular 会自动评估哪些条件为真，并将这些特定的类插入元素中。

现在我正在尝试做类似的事情：

<div class="form-group" ng-class="{has-success: form.email.$valid}">

由于我有引导程序，如果电子邮件有效，它将自动将标签和输入着色为绿色。但它不起作用，我在控制台中收到这个特殊错误：

Error: [$parse:syntax] http://errors.angularjs.org/1.2.27/$parse/syntax?p0=-&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=5&p3=%7Bhas-success%3A%20form.email.%24valid%7D&p4=-success%3A%20form.email.%24valid%7D
z/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:6:450

等等……

我做错了什么？是语法问题吗？

【问题讨论】：

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

你的班级名称中有一个破折号，所以请使用单引号！

ng-class="{'has-success': form.email.$valid}"

【讨论】：

多么好的时机.. 我们的答案是同时发布的.. 17-21-21，你比我早几毫秒.. :D
@PSL - 哈......我知道你总是在这些 Angular 问题上，得快点！
这正是我的想法。现在我接受哪个？再加上投票之战也在附近。
等等，为什么不能反过来呢？我的意思是，ng-class='{"has-success": form.email.$valid}'

【解决方案2】：

这显然是一个解析器错误，由于属性名称@{has-success: form.email.$valid} 中存在-，您的语法无效。您需要将它们用引号括起来。

试试：-

<div class="form-group" ng-class="{'has-success': form.email.$valid}">

【讨论】：

【解决方案3】：

如果你在类名中使用“-”，你应该用单引号覆盖类名。

[ngClass] = "{'some-class': condition}"

否则可以使用

[ngClass] = "{someClass : condition}"

【讨论】：

【解决方案4】：

这对我有用

[ngClass] = "{ 'color-red': isRed}"

【讨论】：

【解决方案5】：

虽然@tymeJV 提到了这个问题的迟到和实际原因，但在某些情况下，如果清除了浏览器选项卡的缓存，ngClass、ngStyle 和相关指令将起作用。 Clear Cache and Hard reload 或在新选项卡中打开都可以，如果您认为指令定义正确。

【讨论】：