CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveng-class
Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29169

AngularJs: ngClass with multiple statements

I need to add two classes through one ng-class definition

One looks like

{true: 'bar', false: ''}[someVar === 'bar']

And the other looks like

{foo: someOtherVar === 'foo'}

If I join them

<div ng-class="{true: 'bar', false: ''}[someVar === 'bar'],{foo: someOtherVar === 'foo'}">

it doesn't work. What is the correct syntax ?

Upvotes: 0

Views: 1277

Answers (3)

Neil
Neil

Reputation: 2749

You need to put a css class in quotes first, and then a statement that evaluates to true or false after.

For example:

<div ng-class="{'bar':someVar==='bar', 'foo':someOtherVar ==='foo'}>

Upvotes: 2

Jared Reeves
Jared Reeves

Reputation: 1390

here you can do it like this:

<div ng-class="{ 'bar' : someVar === 'bar', 'foo' : someOtherVar === 'bar' }"></div>

Just for brevity you could also do this if you need to add two claases and are checking just one variable.

<div ng-class="{ 'bar foo' : expression1 }"></div>

Upvotes: 1

ababashka
ababashka

Reputation: 2101

Try this:

<div ng-class="{'bar': someVar === 'bar', 'foo': someOtherVar === 'foo'}">

Hope, it will help.

Upvotes: 1

Related Questions