Question

目标是创建一个指令，该指令可以根据动态值更改列表中显示的文本的颜色。

例如，我有一个数组：

$scope.messages = [{user: "Eusthace", message: "Hello!", timestamp: 1431328718}];

对于每个用户，我希望在邮件列表中使用不同的文本颜色。

Answer 1

要在HTML元素上设置css样式（例如color），您可以使用ngStyle指令。要根据动态值生成颜色，请向控制器添加功能：

var hashCode = function(str) {
    var hash = 0;
    for (var i = 0; i < str.length; i++) {
        hash = str.charCodeAt(i) + ((hash << 5) - hash);
    }
    return hash;
};

var intToRGB = function(i){
    var c = (i & 0x00FFFFFF)
        .toString(16)
        .toUpperCase();

    return "00000".substring(0, 6 - c.length) + c;
};

$scope.generateColor = function(string) {
    return '#' + intToRGB(hashCode(string))
};

要在您的视图中使用它：

<span ng-style='{color: generateColor("dynamicValue")}'>Some Text</span>

示例：JSFiddle

如何使用Angularjs指令基于动态值更改文本颜色？

1 个答案: