CODEWITHSUNDEEP
javascriptcssangularjsangularjs-ng-repeat
appthat
appthat

Reputation: 826

Using $index in angularjs ng-repeat to generate css classes

I am trying to generate css classes using $index in ng-repeat so I can have indidual control of each dom item.

like so:

do I need to use item_{$index}, item_{{$index}} Been trying many different ways and googled the question for a while but no answer

I have also noticed that angular doesnt seem to like underscore(_) or dashes(-) in ng-class class names. Removing them allows the condition to work. Could this also be my problem in generating classes in ng-repeat?

Thanks

Upvotes: 2

Views: 2486

Answers (2)

micha
micha

Reputation: 1238

class="item_{{$index}}"    (its useable together with ng-class)

http://jsfiddle.net/59v07vqj/

this is not an error, i use class not ng-class for this case or better use

id="item_{{$index}}"

(also possible is ng-class="['item_' + $index]")

Upvotes: 1

chiangf
chiangf

Reputation: 41

Without your actual code, it's a little hard to figure out what's wrong, although I believe that the following is correct

item_{{ $index }}

I don't think angular really cares about underscores and dashes, so it could also be that you have another template renderer conflicting here (e.g. if you're using Flask, then it could be jinja2 interfering with your angular).

That being said, it feels like it might be cleaner not to define separate CSS classes for each $index. Instead, you should define the actual style classes that you want, and then just use them with ng-class.

So, e.g. if you have a few CSS classes (assuming that you want to do a grid): item-foo, item-bar. In this case, if you wanted item-foo, you can do:

<div ng-class="{item-foo: someVariable}">...</div>

Likewise, item-bar:

<div ng-class="{item-bar: !someVariable}">...</div>

Not sure if that's what you want to do, but just a suggestion. See more about ngClass.

Upvotes: 2

Related Questions