颜色范围 - 角度表格值

Question

让我们假设我们有以下设置(下图),我希望表格有5个单元格,但我希望5个单元格具有从绿色到红色的动态颜色范围(1 =绿色,3 =黄色) ,5 =红色,等)

我可以使用的唯一技术是:CSS3/HTML5/Angular - 我可以使用任何有角度的lib

在excel中它的琐碎这样做,但由于我相当新的角度,我承认有点迷失.

~ Script
var arrayWith5Values = [1,2,3,4,5]
~
    <table>
        <tr>
           <td ng-repeat='numericValue in arrayWith5Values'>
              {{numericValue}}}
           </td>
        </tr>
    </table>

它基本上是这个问题的角度版本:根据Python HTML电子邮件中的单元格值和"基于单元格中的值的颜色单元格"从"低到高颜色阴影"着色HTML表格单元格

昨晚我一直在搜索StackOverflow,但是找不到答案.

这是一个例子(来自excel的截图)

Answer 1

沿着Kirill Slatin的答案,但这个更简单:

HTML:

<table>
    <tr>
       <td ng-repeat='numericValue in arrayWith5Values' style="background-color: rgb({{getColor($index)}})"
        ng-init="$parent.numValues = arrayWith5Values.length">
          {{numericValue}}
       </td>
    </tr>
 </table>

控制器JS:

$scope.arrayWith5Values = [1,2,3,4,5,6,7,8,9,10];
$scope.getColor = function(index) {
    var greenVal = Math.round(Math.min((255.0*2.0)*(index/($scope.numValues-1)), 255));
    var redVal = Math.round(Math.min((255.0*2.0)*(($scope.numValues-1-index)/($scope.numValues-1))));
    return "" + greenVal + "," + redVal + ",0";
}

我做的那些小测试似乎工作得很好.JSFiddle 在这里

注意:这是专为绿色到红色量身定制的.这个相同的数学可以应用于其他颜色方案,但它必须在某种程度上再次手动完成