在angularjs ng-repeat中使用$index来生成css类

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

我正在尝试使用ng-repeat中的$index生成css类，这样我就可以对每个dom项进行独立控制。

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

我是否需要使用item_{$index}， item_{$index}尝试了许多不同的方法，在google上搜索了一段时间，但没有答案

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?

我还注意到，在ng类的名称中，角似乎不喜欢下划线(_)或dashes(-)。移除它们允许条件工作。这也可能是我在生成ng-repeat类时遇到的问题吗?

Thanks

谢谢

2 个解决方案

#1

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).

我认为，角度并不真正关心下划线和破折号，所以这里也可能存在另一个模板渲染器冲突(例如，如果你使用Flask，那么它可能是jinja2干扰你的角度)。

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.

也就是说，不为每个$索引定义单独的CSS类似乎更简洁。相反，您应该定义您想要的实际样式类，然后在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:

所以，如果你有一些CSS类(假设你想做一个网格):item-foo, item-bar。在这种情况下，如果你想要itemfoo，你可以:

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

Likewise, item-bar:

同样,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.

不确定这是不是你想做的，只是一个建议。看到更多关于ngClass。

#2

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

这不是一个错误，我在这种情况下使用类而不是ng-class，或者使用得更好

id="item_{{$index}}"

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

(也可能是ng-class="['item_' + $index]")

#1