使用AngularJS从HSL到RGB自动着色

我这里有一些不同的作品，但我正在努力将它们结合在一起。我目前有一个元素列表，按它们的运行状况排序（值在0到100之间）

对于每个元素，我希望根据其运行状况为背景着色。因此，status=0表示填充颜色为红色；状态=50黄色；状态=100绿色

在类似d3的情况下，我将通过以下代码实现这一点（顺便说一下，这是一个很好的技巧）：

但在这里，我处理的是一个普通的列表，而不是d3图形

我过去也使用过ng类来指定动态颜色：

$scope.getClass = function(status) {
    if (status == (100)) {
        return "good-feed"; 
    } else {
        return "bad-feed";
    }
    };

及

我需要结合这两种技术。我认为我需要以一种与现有类似的方式使用ng类，但我不确定如何让颜色更改函数在不必要复杂的情况下工作

有什么想法吗

编辑 以上两段代码都可以工作，但问题是我希望能够遍历0到100之间的所有状态值，而不仅仅是处理非此即彼的情况

例如：

• 第1项状态为23（近似颜色：橙色）
• 项目2状态为45（约颜色：黄橙色）
• 项目3状态为67（约颜色：黄绿色）
• 第4项状态为99（近似颜色：绿色）

等等。现在，我可以为ng类编写类似这样的颜色函数（更新：这不起作用）：

$scope.getClass=函数（状态）{
如果（状态只需使用此

ng-class="{'good-feed' : item.status == 100,'bad-feed' : item.status != 100 }" 

好的，这个答案是我目前得到的最好的答案。它仍然需要一些工作来实现我想要的，但是它在正确的轨道上：

我最终使用jquery根据值分解颜色（就像我尝试使用ng类函数那样）

有关详细信息，请参阅我的

$(document).ready(function () {

var cell = $('ul.list-view li');

cell.each(function() {
var cell_value = parseFloat($(this).html().slice(0, -1));

// Positief

if ((cell_value >= 0) && (cell_value <= 0.3)) {
    $(this).css({'background-color' : '#7FFF95'});   
} 
else if ((cell_value >= 0.31) && (cell_value <= 0.5)) {
    $(this).css({'background-color' : '#66FF7C'});
} 
else if ((cell_value >= 0.51) && (cell_value <= 0.7)) {
    $(this).css({'background-color' : '#4DFF63'});
} 
else if ((cell_value >= 0.71) && (cell_value <= 1)) {
    $(this).css({'background-color' : '#33F749'});
}
else if ((cell_value >= 1.01) && (cell_value <= 1.5)) {
    $(this).css({'background-color' : '#1ADE30'});
}
else if (cell_value >= 1.5) {
    $(this).css({'background-color' : '#00CC66'});
}

// Negatief

else if ((cell_value >= -0.01) && (cell_value <= -0.2)) {
    $(this).css({'background-color' : '#F6ADAC'});
}
else if ((cell_value >= -0.31) && (cell_value <= -0.5)) {
    $(this).css({'background-color' : '#F18483'});
}
else if ((cell_value >= 0.51) && (cell_value <= -0.7)) {
    $(this).css({'background-color' : '#EF706E'});
}
else if ((cell_value >= -0.71) && (cell_value <= -1)) {
    $(this).css({'background-color' : '#ED5B5A'});
}
else if ((cell_value >= -1.01) && (cell_value <= -1.5)) {
    $(this).css({'background-color' : '#EB4745'});
}
else if (cell_value >= -1.5) {
$(this).css({'background-color' : '#E93331'});
}

});

$（文档）.ready（函数（）{
变量单元格=$（'ul.list-view li'）；
cell.each（函数（）{
var cell_value=parseFloat（$（this.html（）.slice（0，-1））；
//假定
如果（（单元格数值>=0）&&（单元格数值=0.31）&（单元格数值=0.51）&&（单元格数值=0.71）&&（单元格数值=1.01）&（单元格数值=1.5）{
$（this.css（{'background-color'：'#00CC66'}）；
}
//否定
否则如果（（单元格数值>=-0.01）和（&（单元格数值=-0.31）和（&（单元格数值=0.51）和（&（单元格数值=-0.71）和（&（单元格数值=-1.01）和（&（单元格数值=-1.5）{
$（this.css（{'background-color'：'#E93331'}）；
}
});
是的——这在“非此即彼”的情况下肯定有效。我会确保更新我的问题以使其更清楚。这不是我的目的。我当前的代码片段和上面的代码片段都有效（事实上，我上面的解决方案给出的结果与您的相同），但问题是我希望能够遍历0到100之间的所有状态值，而不仅仅是处理非此即彼的情况。例如：Item1，status=23（颜色：橙色）Item2，status=45（颜色：黄橙色）Item3，status=67（颜色：黄绿色）Item4，status=99（颜色：绿色）
$scope.getClass = function(status) {
    if (status <= (10)) {
        return "dark-red"; 
    } else if (10 < status <= 20){
        return "red-orange"; 
// continue pattern for all intervals until 100 is reached
    } else {
        return "undefined-grey";
    }
};

ng-class="{'good-feed' : item.status == 100,'bad-feed' : item.status != 100 }" 

$(document).ready(function () {

var cell = $('ul.list-view li');

cell.each(function() {
var cell_value = parseFloat($(this).html().slice(0, -1));

// Positief

if ((cell_value >= 0) && (cell_value <= 0.3)) {
    $(this).css({'background-color' : '#7FFF95'});   
} 
else if ((cell_value >= 0.31) && (cell_value <= 0.5)) {
    $(this).css({'background-color' : '#66FF7C'});
} 
else if ((cell_value >= 0.51) && (cell_value <= 0.7)) {
    $(this).css({'background-color' : '#4DFF63'});
} 
else if ((cell_value >= 0.71) && (cell_value <= 1)) {
    $(this).css({'background-color' : '#33F749'});
}
else if ((cell_value >= 1.01) && (cell_value <= 1.5)) {
    $(this).css({'background-color' : '#1ADE30'});
}
else if (cell_value >= 1.5) {
    $(this).css({'background-color' : '#00CC66'});
}

// Negatief

else if ((cell_value >= -0.01) && (cell_value <= -0.2)) {
    $(this).css({'background-color' : '#F6ADAC'});
}
else if ((cell_value >= -0.31) && (cell_value <= -0.5)) {
    $(this).css({'background-color' : '#F18483'});
}
else if ((cell_value >= 0.51) && (cell_value <= -0.7)) {
    $(this).css({'background-color' : '#EF706E'});
}
else if ((cell_value >= -0.71) && (cell_value <= -1)) {
    $(this).css({'background-color' : '#ED5B5A'});
}
else if ((cell_value >= -1.01) && (cell_value <= -1.5)) {
    $(this).css({'background-color' : '#EB4745'});
}
else if (cell_value >= -1.5) {
$(this).css({'background-color' : '#E93331'});
}

});