AngularJS Multiple class using expression

Question

I have a table where I need to apply two different classes, using expressions. 1st class is applied based on following expression. {'Up':'class-up', 'Down':'class-down'}[a.status] and 2nd class is applied based on bold: !a.read

The classes here are class-up, class-down, bold. So how should be the expression framed? I tried:

<tr ng-repeat="a in all" ng-class="{{'Up':'class-up', 'Down':'class-down'}[a.status],bold: !a.read}">

<tr ng-repeat="a in all" ng-class="{'Up':'class-up', 'Down':'class-down'}[a.status],bold: !a.read">

But I keep getting errors in console. What is the correct format to apply these classes based on the given expressions

isn't this quite similar to the example in the documentation? docs.angularjs.org/api/ng/directive/ngClass — Eduard Gamonal
– Eduard Gamonal, Commented Jul 4, 2014 at 10:22
Yes, I tried those. But I'm unable to get it to work. The problem comes when 1st expression isn't directly dependent on a variable. {'Up':'class-up', 'Down':'class-down'}[a.status] . Here a.status returns Up or Down as response which in turns applies class-up and class-down classes respectively. — Aniket Sinha
– Aniket Sinha, Commented Jul 4, 2014 at 10:30
Do you even need such a complex expression? Can you just use something like: ng-class="{ 'class-up': a.status === 'Up', 'class-down': a.status === 'Down', 'bold': !item.read }" — Paolo Moretti
– Paolo Moretti, Commented Jul 4, 2014 at 10:34
This is the final approach which I tried(works) i.e splitting into status as Up and Down in 2 components. I thought maybe status can be evaluated in a single expression instead of two. — Aniket Sinha
– Aniket Sinha, Commented Jul 4, 2014 at 10:42

przno · Accepted Answer · 2014-07-04 10:35:02Z

1

With the clarification from your comment:

<tr ng-repeat="a in all" ng-class="{'class-up': a.status=='up', 'class-down': a.status=='down', 'bold': !a.read}">hello world</tr>

answered Jul 4, 2014 at 10:35

przno

3,5145 gold badges33 silver badges46 bronze badges

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

Collectives™ on Stack Overflow

AngularJS Multiple class using expression

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related