ngClass 不工作？

Question

I am new to AngularJS and I understand that the ngClass directive can be used to insert classes dynamically into elements like:

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

And angular will automatically evaluate which conditions are true and will insert those particular classes in the element.

Now I am trying to do something like:

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

Since I have bootstrap, it will automatically color the label and the input green if the email is valid. But it doesn't work and I am getting this particular error in the console:

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

and so on....

What am I doing wrong? Is it a syntax issue?

Answer 1

你的类名中有一个破折号，所以使用单引号！

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

Answer 2

It is clearly a parser error, you have invalid syntax due to the presence of - in the property name @ {has-success: form.email.$valid} . You would need to wrap them in quotes.

Try:-

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

Answer 3

If you use '-' in the class name you should cover the class name using single quotes.

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

otherwise can be use

[ngClass] = "{someClass : condition}"

Answer 4

这对我有用

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

Answer 5

Though its late and the actual reason for this problem was mentioned by @tymeJV, in some cases, ngClass , ngStyle and related directives work if the browser tab's cache is cleared. Clear Cache and Hard reload or opening in a new tab will work, if you feel the directive is properly defined.