javascript - 如何使用 Angularjs 指令根据动态值更改文本颜色？

Question

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

例如我有一个数组:

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

对于每个用户，我希望消息列表中的文本颜色不同。

Answer 1

要在 HTML 元素上设置 css 样式(例如 color)，您可以使用 ngStyle 指令。要根据 Controller 的动态值添加函数生成颜色:

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))
};

在您的 View 中使用它:

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

示例:JSFiddle