AngularJs: ngClass with multiple statements

Question

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 ?

Answer 1

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'>

Answer 2

Try this:

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

Hope, it will help.

Answer 3

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>