Ng-class Conditional Syntax

Question

I am trying to conditionally apply a class to an element but I can't get the syntax correct

I have tried the following but it does not work.

ng-class="{foo: bar === "true"}"

bar is a boolean value.

Also, the element already has a class attribute. Will foo be appended to the list of classes?

You can also use javascript condtional operator there.. like as a?a:b — Mahesh
– Mahesh, Commented Feb 23, 2015 at 13:28

Paqman · Accepted Answer · 2015-02-23 12:51:51Z

1

You shouldn't use the double quote on your evaluation, because it's closing your ng-class attribute. You can use the single quote if you want to check a string. In you're case, if bar is a boolean value, you don't have to use quotes at all :

ng-class="{foo: bar === true}"

which is equivalent to

ng-class="{foo: bar}"

In case of a string, use :

ng-class="{foo: bar === 'your_string'}"

If your element already has a class attribute, foo will be appended to the list.

answered Feb 23, 2015 at 12:51

Paqman

4563 silver badges8 bronze badges

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

Comments

Paul John · Accepted Answer · 2015-02-23 12:55:04Z

1

ng-class="{'checkedClass': trueVariable}

Here is a post explaning the same http://www.ecofic.com/about/blog/conditionally-apply-a-css-class-with-angularjs

answered Feb 23, 2015 at 12:55

Paul John

1,6611 gold badge13 silver badges15 bronze badges

Collectives™ on Stack Overflow

Ng-class Conditional Syntax

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related