如何使用 angular 为具有 0-100 渐变的元素设置样式

Question

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

更新：

我刚刚意识到第一个 fiddle 使用的是 angular 1.0，这对我没用。我使用更相关的 angular 1.3 重新制作了 fiddle。然而，可接受的答案不再适用于此版本的 angular。有什么建议么？这是新的 fiddle

这是一个简单的对象

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

我希望我的列表项的背景是 $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>

如何使用 angular 为具有 0-100 渐变的元素设置样式

How to style an element with a gradient from 0-100 using angular

javascript

css

gradient

angularjs