Javascript 如何使用“角度”设置0-100渐变元素的样式

我正在使用angular创建一个带有ng重复的列表。我想用渐变设置每个列表项的背景样式。我的对象中有一个值，它是一个0-100之间的数字，我想根据这个数字设置背景渐变的样式。看看这个，我的问题的一个基本例子

更新：

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

这是一个简单的物体

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

---

我希望列表项的背景是$scope.y值的渐变。我确信使用ng风格可以做到这一点，但我似乎无法理解，因此非常感谢您的帮助。

试试这个，我已经在您的代码中尝试过了，它正在工作：

<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>

现在也可以工作了。

只是为了简化

<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>

{x.x}
{{x.y}}

你确定你指的是梯度吗？也许你是说不透明度？当然，背景的不透明度-color@Developing以下哪一项对你有用吗？@Developing我可以让它运行，这里：这很好，不完美，因为100%不是预期的纯色，但它确实有用。谢谢