Question

我正在使用angular创建一个带有ng-repeat的列表。我想用渐变为每个列表项的背景设置样式。我的对象中有一个值是0-100的数字，我想基于该数字设置背景渐变的样式。请查看此fiddle以获取我的问题的基本示例。

更新：

我刚刚意识到第一个小提琴是使用角度1.0，这对我来说没用。我使用角度1.3重新制作小提琴，这更相关。但是，可接受的答案不再适用于此版本的角度。有什么建议？这是新的fiddle

这是一个简单的对象

$scope.list = [
    {x:1,y:70},
    {x:2,y:80},
    {x:3,y:90},
    {x:4,y:100}
]

我希望list-items的背景是$ scope.y值的渐变。我确信这可以使用ng-style，但我似乎无法弄明白，所以非常感谢任何帮助。

Answer 1

试试这个，我已经在你的代码中尝试了它并且它正在运行：

<span style="{{ 'background-image: linear-gradient(to bottom, rgba(255,255,255,0)' + x.x +'%, rgba(41,137,216,1)' + x.y + '%)' }}">Works now too.</span>

Answer 2

仅为简化

<li class="list-group-item" style="background-image: linear-gradient(to bottom, red {{x.x}}%, blue {{x.y}}%)" ng-repeat="x in list">{{ x.x }} 
  <span class="pull-right">{{ x.y }}</span>     
</li>

如何使用角度

2 个答案: