如何使用角度设置具有 0-100 渐变的元素样式答案

【问题标题】：How to style an element with a gradient from 0-100 using angular如何使用角度设置具有 0-100 渐变的元素样式
【发布时间】：2016-12-09 02:32:14
【问题描述】：

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

更新：

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

这是一个简单的对象

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

我希望我的列表项的背景是 $scope.y 值的渐变。我确信使用 ng-style 可以做到这一点，但我似乎无法弄清楚，因此非常感谢任何帮助。

【问题讨论】：

你确定你的意思是渐变吗？也许你的意思是不透明度？
当然，背景颜色的不透明度
@Developing 以下任一方法对您有用吗？

标签： javascript css angularjs gradient

【解决方案1】：

只是为了简化

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

【讨论】：

这很好，但并不完美，因为 100% 不是预期的纯色，但它确实有效。谢谢！

【解决方案2】：

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

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

【讨论】：

@Developing 我能够让它运行，这里：jsfiddle.net/Lvc0u55v/13095