【问题标题】:Using $index in angularjs ng-repeat to generate css classes在 angularjs ng-repeat 中使用 $index 生成 css 类
【发布时间】:2015-01-27 17:49:21
【问题描述】:
我正在尝试在 ng-repeat 中使用 $index 生成 css 类,以便我可以单独控制每个 dom 项。
像这样:
我是否需要使用 item_{$index}, item_{{$index}} 尝试了许多不同的方法并在谷歌上搜索了一段时间但没有答案
我还注意到 Angular 似乎不喜欢 ng-class 类名称中的下划线(_)或破折号(-)。删除它们可以使条件起作用。这也是我在 ng-repeat 中生成类的问题吗?
谢谢
【问题讨论】:
标签:
javascript
css
angularjs
angularjs-ng-repeat
【解决方案1】:
没有你的实际代码,虽然我相信以下是正确的,但很难找出问题所在
item_{{ $index }}
我认为 Angular 并不真正关心下划线和破折号,所以也可能是您有另一个模板渲染器在这里发生冲突(例如,如果您使用的是 Flask,那么它可能是 jinja2 干扰了您的 Angular)。
话虽如此,感觉不为每个 $index 定义单独的 CSS 类可能更干净。相反,您应该定义您想要的实际样式类,然后将它们与 ng-class 一起使用。
所以,例如如果你有几个 CSS 类(假设你想做一个网格):item-foo、item-bar。在这种情况下,如果你想要 item-foo,你可以这样做:
<div ng-class="{item-foo: someVariable}">...</div>
同样,项目栏:
<div ng-class="{item-bar: !someVariable}">...</div>
不确定这是否是您想要做的,但只是一个建议。查看更多关于ngClass的信息。
【解决方案2】:
class="item_{{$index}}" (its useable together with ng-class)
http://jsfiddle.net/59v07vqj/
这不是错误,我在这种情况下使用类而不是 ng-class 或更好地使用
id="item_{{$index}}"
(也可能是 ng-class="['item_' + $index]")