CODEWITHSUNDEEP
javascripthtmlcssangularjs
Sachin Kainth
Sachin Kainth

Reputation: 46760

Ng-class Conditional Syntax

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?

Upvotes: 0

Views: 55

Answers (2)

Paul John
Paul John

Reputation: 1661

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

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

Upvotes: 1

Paqman
Paqman

Reputation: 456

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.

Upvotes: 1

Related Questions