如何使用Angularjs指令根据动态值改变文本颜色

How to change text color based on a dynamic value using Angularjs directives?

本文关键字：改变 文本 颜色 动态 何使用 Angularjs 指令      更新时间：2023-09-26

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

例如，我有一个数组: 
$scope.messages = [{user: "Eusthace", message: "Hello!", timestamp: 1431328718}];

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

要在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

相关文章：