Angular ngClass multiple ternary operator conditions

Question

What is the best way to put more than 1 ternary conditional class in an angular directive ngClass

where values are class names?

I've tried several variations of this, but I always get a compilation error:

ng-class="$index > 2 ? 'l3 m4 s12 medium' : 'l4 m6 s12 medium', true ? 'red':'blue'

ng-class="{$index > 2 ? 'l3 m4 s12 medium' : 'l4 m6 s12 medium', true ? 'red':'blue'}

+3

d -_- b June 13. 15 at 21:49

2 answers

SamuelMS · Answer 1 · 2015-06-13T21:56:02+0000

My preferred syntax for an ng class is the following, as it clearly refers to which classes you add.

ng-class={ 'className' : yourConditionHere, 'class2' : anotherConditionHere }

Try it.

sfletche · Answer 2 · 2015-06-13T22:46:21+0000

So far, I totally agree with @SamuelMS about the explicit mapping of class names ...

If you really want to use multiple ternary operators (or are just curious), you can do it like this:

ng-class="($index > 2 ? 'l3 m4 s12 medium' : 'l4 m6 s12 medium') + ' ' + (true ? 'red' : 'blue')"