Question

我试图在字符串数组的ngRepeat中以角度动态为某些文本指定颜色。

我在解决“角度方式”问题时遇到了问题。这样做。我总是可以设置一个过滤器，将适当的HSL颜色方案推出到元素的样式中，但这样效率非常低，因为它必须重新计算每个摘要周期的颜色。 ngRepeat数组可能只有几千个项目。

如果相关，这里是文字 - ＆gt; 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-repeat看起来像这样，取决于你如何绑定这些颜色：

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

或

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

你可以通过单向绑定单向绑定到属性，只需确保使用::。

在ngRepeat中使用Angular动态更改元素颜色

1 个答案: