【问题标题】: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]")

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2016-07-26
        • 1970-01-01
        • 2015-05-05
        • 2017-02-11
        • 1970-01-01
        • 1970-01-01
        • 2012-10-10
        • 1970-01-01
        相关资源
        最近更新 更多