AngularJS, using ng-class to assign a class if variable = something

Question

I'm trying to assign a different class to an icon if its category is selected. I want to add class ìcon-pfeil_unten` if variable category == a number. I am trying with:

<i class="icon-pfeil_oben" ng-class="{'icon-pfeil_unten': category.16}"></i>

Where 16 is the category's ID. If category == 16, nothing happens. I guess I am writing the expression wrong. What's the correct way to test the value of a variable using ng-class ?

tymeJV · Accepted Answer · 2013-11-01 13:37:28Z

62

You can do:

ng-class="{true: 'icon-pfeil_unten', false: 'icon-pfeil-oben'}[category == 16]"

So basically, if category == 16 evals to true, add class icon-pfeil_unten

edited Nov 1, 2013 at 13:37

answered Nov 1, 2013 at 13:23

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

7 Comments

Ila Over a year ago

Thanks! Is it possible to toggle between two classes using a statement like this, e.g "if category == 16, add class icon-pfeil_unten, otherwise add class icon-pfeil_oben", or is there a better way to do that?

tymeJV Over a year ago

@Ali -- Yeah, I edited the answer, I believe that should work.

Ila Over a year ago

Worked like a charm, once I removed the initial class="" tag. Doesn't work if I leave that in. So the complete working element is: <i aria-hidden="true" ng-class="{true: 'icon-pfeil_unten', false: 'icon-pfeil_oben'}[category == 16]"></i>

Dravidian Over a year ago

@tymeJV Just curious, What if more than 1 class is to be made true (I mean activated) on the condition? What is the syntax for doing that? Thanks.

tymeJV Over a year ago

@Dravidian - I assume just add another class for the true condition, IE: ng-class="{true: 'icon-pfeil_unten and_another_class' ..

|

BusyBetty · Accepted Answer · 2016-05-04 20:30:53Z

22

You can also do this short hand:

    ng-class="category==16 ? 'icon-pfeil_unten' : 'icon-pfeil-oben'"

answered May 4, 2016 at 20:30

BusyBetty

2292 silver badges3 bronze badges

Collectives™ on Stack Overflow

AngularJS, using ng-class to assign a class if variable = something

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related