javascript - 在 ngRepeat 中使用 Angular 动态改变元素颜色

Question

我正在尝试在字符串数组的 ngRepeat 中动态为某些 Angular 文本分配颜色。

我在弄清楚执行此操作的“Angular 方式”时遇到问题。我总是可以设置一个过滤器，将适当的 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

您可以像您计划的那样使用过滤器，但您可以通过使用单向绑定(bind) Angular 来节省性能，只需对每个项目评估一次。

所以你有了你的过滤器，然后你的 ng-repeat 看起来像这样，具体取决于你如何准确地绑定(bind)这些颜色:

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

或者

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

您可以以与单向绑定(bind)相同的方式绑定(bind)到属性，只需确保使用 ::。