Angularjs ng-class not updating when using object annotation style

Question

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?

What class are you trying to add? The value stored in user.genre? The syntax you probably want is: ng-class="{ user.genre: true}" — tymeJV
– tymeJV, Commented Jan 21, 2015 at 14:38
Have you tried changing the plunkr? it returns a $parse.syntax error — datamosh
– datamosh, Commented Jan 21, 2015 at 14:45

maxisam · Accepted Answer · 2015-01-21 15:19:16Z

1

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

edited Jan 21, 2015 at 15:19

answered Jan 21, 2015 at 14:52

maxisam

22.9k9 gold badges83 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

datamosh Over a year ago

that was my previous solution but it still didn't work. I'll create another plunk to test if this works in plunkr -being a much simpler structure than the actual app I'm working on

maxisam Over a year ago

What exactly do you want it to do ?

datamosh Over a year ago

when changing an object's property -by utterly replacing the object in the array- the class should change. Please inspect the plunkr's tables to see what I mean, while the bottom table has its class changed, the top one doesn't.

maxisam Over a year ago

i don't see why you can't use function to do the same thing. plnkr.co/edit/vHtWXZrnailoKDD8v28O?p=preview

datamosh Over a year ago

I've accepted your answer because it brings to the right path. I was checking for another parameter to be true to enable the class and I was doing it in HTML -which is a bad practise and return non elegant code. Now I've moved all of my logic inside the function. Thanks

|

Dhanraj Dadhich · Accepted Answer · 2015-01-21 15:08:18Z

0

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

answered Jan 21, 2015 at 15:08

Dhanraj Dadhich

1

2 Comments

datamosh Over a year ago

Are you saying I can't evaluate an object if I want to use multiple parameters?

Dhanraj Dadhich Over a year ago

I am saying that the object should be in the form of array. Or we have to iterate the object parameters to evaluate.

Collectives™ on Stack Overflow

Angularjs ng-class not updating when using object annotation style

What do I expect?

What did I try?

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

What do I expect?

What did I try?

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related