颜色范围-角度表值 [英] Color range - table values in angular

问题描述

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

Lets assume we have the following setup (bellow), I want the table to have 5 cells, which it will, but i want the 5 cells to have a dynamic color range which goes from green to red (1 = green, 3 = yellow, 5 = red, ect)

我只能使用的技术是:CSS3/HTML5/Angular-我可以使用任何角度的库

The only technologies I am allowed to work with is : CSS3 / HTML5 / Angular - I am allowed to work with any angular lib

在excel中，这样做很琐碎，但是由于我对angular还是很陌生，所以我有点迷路了.

In excel its trivial doing this, but since im fairly new to angular, i'm admittedly a bit lost.

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

这基本上是这个问题的成角度的版本:和此基于单元格中的值

It's basicly the angular version of this question : Coloring HTML table cells from "Low to High Color Shades" depending on Cell Value in Python HTML Email and this Color Cell Based on Value in Cell

我昨天晚上一直在搜索StackOverflow，找不到答案.

I have been searching StackOverflow for the majority of last night and could not find an answer.

这里是一个示例(excel的屏幕截图)

Here is an example (screenshot from excel)

推荐答案

与Kirill Slatin的回答相同，但这简单得多:

Along the same lines of Kirill Slatin's answer, but this one is a lot simpler:

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

Seemed to be working pretty well with the little testing I did. JSFiddle here

注意:这是专为绿色到红色量身定制的.同样的数学运算可以应用于其他配色方案，但必须再次手动进行

Note: this is tailored specifically for green to red. This same math could be applied to other color schemes, but it would have to be somewhat manually done again

这篇关于颜色范围-角度表值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！