Is it possible to use multiple expressions in ng-class?

[codef0rmer]

IMO, these are the ways to apply CSS class to an element:

<div ng-class="foobar"></div>

OR

<div ng-class="{true: 'active', false: 'inactive'}[button.state]"></div>   where button is a javascript object having a property `state` as false.

What I want is to apply multiple CSS classes running different expressions. I tried this but did not work. 
<div ng-class="{true: 'active', false: 'inactive'}[button.state]" ng-class="{0: 'first'}[$index]"></div>  

Is there a way to combine both?

[Pawel Kozlowski]

Hi!

Actually the syntax for using objects in ng-class is slightly different, that it, a class name is a key and a value is an expression. So, I would write your ng-class object like this:

ng-class={active: button.state, inactive:!button.state, first:!$index}

Didn't test but it should work :-)

Cheers,

Pawel

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

--
Question? Send a fiddle (http://jsfiddle.net/pkozlowski_opensource/Q2NpJ/) or a plunk (http://plnkr.co/)
Need help with jsFiddle? Check this: http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/

Looking for UI widget library for AngularJS? Here you go: http://angular-ui.github.com/

[codef0rmer]

Yeah that worked pretty well. Thanks!

I made a fiddle also for others to understand. The syntax is "CSS class : property check"

http://jsbin.com/multingclass/1/

[yog...@edgemetric.com]

Worked well for me too, this is what I was looking for, thanks!

On Thursday, November 1, 2012 9:30:23 PM UTC+5:30, Pawel Kozlowski wrote: