使用 ng-repeat 在 li-tag 上设置 ng-style/style 属性

Question

该代码有效：

<ul>
  <li style="width:100%;"  ng-repeat="period in row.entity.dayViewModels[row.grid.columns.indexOf(col)].periods" >
    <a style="background: rgb({{::period.color}})">{{::period.title}}</a>
  </li>
</ul>

我想要的是用 period.color 的背景颜色格式化 li-tag，而不是 a-tag。

但是在 li-tag 上设置 ng-style/style 不起作用，因为那时周期是未知的...

那么如何格式化li-tag？

Answer 1

嗯...我认为句号在 li 标签上是已知的。我写了一个简单的例子来实现你想要的：http://jsbin.com/dosohehopa/2/edit?html,js,output

Answer 2

这对我有用。

<ul>
  <li ng-style="{backgroundColor: period.color}"  ng-repeat="period in row.entity.dayViewModels[row.grid.columns.indexOf(col)].periods" >
    <a>{{::period.title}}</a>
  </li>
</ul>

对于 IE11 问题.. 使用 ng-attr-style 属性而不是样式。样式属性的急切处理将 {{::item.color }} 视为无效的 bgcolor 值。因此颜色没有反射。

使用 ng-repeat 在 li-tag 上设置 ng-style/style 属性

Set ng-style/style attribute on an li-tag with ng-repeat

angularjs

angularjs-ng-repeat