ngClass 不工作？

Question

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

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

并且 angular 将自动评估哪些条件为真，并将那些特定的类插入到元素中。

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

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

因为我有 bootstrap，如果电子邮件有效，它会自动为标签和输入涂上绿色。但它不起作用，我在控制台中收到此特定错误：

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

等等....

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

Answer 1

您的 class 名字中有一个破折号，所以请使用单引号！

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

Answer 2

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

尝试：-

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

Answer 3

这对我有用

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

Answer 4

如果您在 class 名称中使用“-”，您应该使用单引号覆盖 class 名称。

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

否则可以使用

[ngClass] = "{someClass : condition}"

Answer 5

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

ngClass 不工作？

ngClass not working?

javascript

twitter-bootstrap

angularjs