ngClass not working?

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

Theres a dash in your class name, so use single quotes!

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