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}">

由于我有引导程序,因此如果电子邮件有效,它将自动为标签着色并输入绿色.但它不起作用,我在控制台中收到此特定错误:

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

你的班级名称中有一个短划线,所以请使用单引号!

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] = "{'some-class': condition}"

否则可以使用

[ngClass] = "{someClass : condition}"