Angular NgClass with multiple expressions

Question

I want to evaluate multiple expressions, but the class applied will be the same. Here's an example...

<tr ng-class="{'highlight' : Expression1 || Expression2 || Expression3}">

If any of the expressions are true, it will apply the highlight class. I have tried a few versions, but I'm not sure if this is the correct approach.

<tr ng-class="{'highlight' : Expression1, 'highlight' : Expression2 }">
<tr ng-class="[{'highlight' : Expression1, 'highlight' : Expression2 }]">

None of these seem to work, and all the example I have seen apply a different class to each evaluation.

Isn't http://stackoverflow.com/a/18871805/5259611 what you are looking for? — Carsten Farving, Oct 08 '15 at 12:36
In this fiddle (https://jsfiddle.net/Farving/mj17u96t/) it seems like it is not possible to use appropriately on — Carsten Farving, Oct 08 '15 at 12:55
@CarstenFarving, this used different classes per expression. — Christian Phillips, Oct 08 '15 at 15:23

score 2 · Accepted Answer · answered Oct 08 '15 at 12:43

2

This is just fine and I believe the correct way to do it.

<tr ng-class="{'highlight' : Expression1 || Expression2 || Expression3}">

answered Oct 08 '15 at 12:43

Mathew Berg

28,625
11
69
90

I have no idea why it didn't work previously, but this is now working - I can only assume the css or javascript file was cached! Thanks anyway. – Christian Phillips Oct 08 '15 at 15:33
Potentially :) if you're using chrome, open up the dev tools (f12) click on the cog, and then select disable cache (Should be in the top left). Also... spare an upvote? – Mathew Berg Oct 08 '15 at 16:04

score 0 · Answer 2 · answered Oct 08 '15 at 12:43

Would this be of use?

<!-- example with string syntax -->
<!-- use the type variable as a class -->
<div class="item ng-class:type;">Stuff Goes Here</div>

<!-- example with string syntax -->
<!-- use the styleOne and styleTwo variables as classes -->
<div class="item ng-class:[styleOne, styleTwo];">Stuff Goes Here</div>

<!-- example with evaluated data -->
<!-- add the text-error class if wrong is true -->
<div class="item ng-class:{ 'text-error': wrong };">Stuff Goes Here</div>

Taken from: The many ways to use ng-class

score 0 · Answer 3 · answered Oct 08 '15 at 12:52

0

Check the version of angular library you are using.

answered Oct 08 '15 at 12:52

Shamal Perera

1,611
1
18
21

Angular NgClass with multiple expressions

3 Answers3