ngRepeatの角を使って要素の色を動的に変更します。

Question

文字の配列のngRepeatで角度のあるテキストに色を動的に割り当てようとしています。

私はこれを行うのに「角度のある道」を考え出すことに問題があります。私はいつも、適切なHSLカラースキームを要素のスタイルに適用するフィルタを設定できますが、ダイジェストサイクルごとに色を再計算する必要があるため、非常に非効率です。 ngRepeatアレイは、数千アイテムになる可能性があります。それは、関連するなら

は、ここにテキストである - > HSL変換コード：

function calculateColor(value){ 
    var saturation = [0.35, 0.5, 0.65]; 
    var lightness = [0.25, 0.35, 0.45]; 

    var hash = stringToHash(value); 
    var hsl = calculateHsl(hash, lightness, saturation); 
    return hsl; 
} 

function stringToHash(value){ 
    var seed = 131; 
    var seed2 = 137; 
    var hash = 0; 
    value += 'x'; 

    var MAX_SAFE_INT = 9007199254740991/seed2; 
    var charArray = value.split(''); 

    for(var i = 0; i < charArray.length; i++){ 
     if(hash >= MAX_SAFE_INT){ 
      hash == hash/seed2; 
     } 
     hash = hash * seed + charArray[i].charCodeAt(0); 
    } 
    return Math.abs(hash); 
} 

function calculateHsl(hash, lightness, saturation){ 
    var H,S,L; 
    H = hash % 359; 
    hash = hash/360; 
    S = saturation[hash % saturation.length]; 
    hash = hash/saturation.length; 
    L = lightness[hash % lightness.length]; 

    return [H,S,L]; 
} 

フィルタ：あなたはあなたが計画していただけのようなフィルタを使用することができますが、保存することができます

chatApp.filter('toHsl', function(){ 
    return function(input){ 
     var hsl = calculateHslColor(input); 
     var hslString = 'hsl('+hsl[0]+', '+hsl[1]*100+'%, '+hsl[2]*100+'%)' 
     return hslString; 
    } 
}); 

Answer 1

一方向の拘束角度を用いて性能を上げることは、各項目を一度評価するだけで済む。

はつまり、あなたのフィルターを持って、あなたのngのリピートは、あなたがこれらの色結合されているかを正確に応じて、次のようになります。

<div ng-repeat="item in colorList"> 
    <div>{{::('item'| toHsl)}}</div> 

それとも

<div ng-repeat="item in colorList | filter:toHsl"> 
    <div> {{::item}}</div> 

をすることができます1の方法を1-wayバインディングで同じ属性にバインドする場合は、::を必ず使用してください。