CODEWITHSUNDEEP
angularjsng-class
datamosh
datamosh

Reputation: 130

Angularjs ng-class not updating when using object annotation style

I just noticed that something doesn't work in Angular (or it doesn't as I expected it to work) when using object in ng-class.

What do I expect?

When changing the name of a property in the object, the class should update accordingly.

What did I try?

I found that when I use object style annotation like ng-class="{obj.prop: testExpression}" and the obj.prop changes (the expression keeping returning TRUE) the value inside ng-class changes but that in the class attribute doesn't.

the difference is between this [NOT WORKING]:

<tr ng-repeat="user in users" ng-class="{ {{user.genre}}: true}">

and this [WORKING]:

<tr ng-repeat="user in users" ng-class="user.genre">

See a plunkr here:

http://plnkr.co/edit/149ba2WQ5RK5XqLmWQWK?p=preview

The thing is I need to use object annotation in order to disable the class.

Is there something I am doing wrong or I just misunderstood Angular?
Or a third solution?

Upvotes: 0

Views: 3953

Answers (2)

maxisam
maxisam

Reputation: 22745

In short, { {{user.genre}}: true} is not a correct angularjs expression

For your solution, try ng-class="getClass(user.genre)"

and do whatever you want in getClass function

example

Upvotes: 1

Dhanraj Dadhich
Dhanraj Dadhich

Reputation: 1

You are trying to evaluate an object here, hence for each key-value pair of object with a real (truthy) value the corresponding key is used as a class name. If you have single parameter you have to use like:

<tr ng-repeat="user in users" ng-class="user.genre: true">

In case of multiple parameter you have to use like: 

<p ng-class="{strike: deleted, bold: important, red: error}">

Upvotes: 0

Related Questions