CSS binding with $index when setting multiple classes

Question

With this binding

css: 'item' + $index()

I get this output

class="item0"
class="item1"
class="item2"
...

I'm not able to use this when binding multiple classes like below, a syntax error is thrown because : is expected instead of +. Any hints?

css: { 'item' + $index(), 'active': $index() == 0 }

A workaround is to use attribute binding, but if possible I'd like to avoid that because there are existing classes set already, so I'd have to include those in the binding.

attr: { 'class': 'slider-item item' + $index() + ($index() == 0 ? ' active' : '') }

nemesv · Accepted Answer · 2013-06-18 10:37:46Z

8

You can also do the same string concatenation in the css binding:

css: 'item' + $index() + ($index() == 1 ? ' active' : '')

Demo JSFiddle.

answered Jun 18, 2013 at 10:37

nemesv

140k16 gold badges424 silver badges364 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user247702 Over a year ago

Didn't think of that, it works indeed and it's cleaner. +1 for now, will accept if it turns out to be the best possible solution.

nemesv Over a year ago

If you want to set dynamic class like item0, item1 etc. you cannot use an object literal as the css binding parameter, so your only options is to use string concat to build your classes either in attr or in the css binding.

Collectives™ on Stack Overflow

CSS binding with $index when setting multiple classes

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related