ngClass 不工作？

Posted 2023-02-19

【中文标题】ngClass 不工作？

【英文标题】：ngClass not working?

【发布时间】：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

等等……

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

【参考方案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 或在新选项卡中打开都可以，如果您认为指令定义正确。