Динамический цвет элементов с угловым в 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

Вы можете использовать фильтр, как вы планировали, но вы можете сэкономить при выполнении с использованием одностороннего углового привязки нужно только оценивать каждый элемент один раз.

Так у вас есть фильтр, а затем ваши нг-повтор будет выглядеть примерно так, в зависимости от того, как именно вы являетесь обязательными для этих цветов:

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

Или

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

вы можете 1 способ привязать к атрибутам одно и то же с 1-сторонней привязкой, просто убедитесь, что вы используете ::.