HSLからRGBへAngularJSを使用したオートカラー

Question

私はここにいくつかの作品を用意していますが、それらをすべて一緒に持っていく方法には苦労しています。私は現在、健康状態（0から100までの値）でソートされた要素のリストを持っています。

各要素について、その健康状態に基づいて背景を色付けしたいと思います。だから、ステータス= 0は私が赤の塗りつぶし色を持っていることを意味します。ステータス= 50イエロー;ステータス= 100緑。 D3のようなもので

、私は次のコード（ところで、偉大なトリックである、）とすることを実現します：

/*normalize input between 0 and 100 to hsl color scale -- so 0=0 and 100 = 120, where hue=0 is red and hue=120 is green */  

var hueScale = d3.scale.linear().domain([0,100]).range([0,120]); 

    .style("fill", function(d){ 
     var hslColor = 'hsl(' + hueScale(d.status)) + ', ' + (100) + '%, ' + (50) + '%, ' + (1) + ')'; 
     return d3.rgb(hslColor).toString().toUpperCase(); }) 

が、ここで、私は、通常のリストにない扱っていますd3グラフィック私はまた、動的色を指定するには、過去にNG-クラスの使用を作った

は：

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

と

ng-class="[getClass(item.status)]" 

私はこれらの技術の両方を組み合わせることが必要です。私はng-classを私のものと同様のやり方で使うと思いますが、色の変更機能を不必要に複雑にすることなく動作させる方法がわかりません。

どのような考えですか？

EDIT作業上記 どちらも私の現在のコードスニペットが、問題は、私はちょうど二者択一の状況を扱えない、0と100の間のすべてのステータス値を反復処理することができるようにしたいです。 （：オレンジ約色）45の状態に

項2 23の状態に

• 項目1：（約色：黄橙色）
• アイテム3と例えば

• 項目4 99のステータスを持つ（約色：緑）

などなど：67（黄緑色約色）の状態。 （：これが動作しない更新）：

$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-クラスのための私の色関数を書くことができます。これをよりスムーズにする方法はありますか（d3ソリューションに類似）？

Answer 1

を使用しています。

私はjqueryを値に基づいて分割することに夢中になりました（私のng-と一緒にしようとしていたように）クラス機能）

詳細はJSFiddleを参照してください。

$(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'}); 
} 

}); 

Answer 2

ただよしので、この答えは、私が今のところ持って最善であるこの

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