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

Question

The objective is to create a directive which can change color of the text displayed on a list based on a dynamic value.

For example, I have an array:

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

For each user I'd like to have a different text color in the list of messages.

Please be more specific about color system and determining criteria... can be done so many different ways — charlietfl
– charlietfl, Commented Sep 26, 2015 at 3:56
500 users 500 colors? Assigned once per user or different color depending on the time of day they log in...come on...do a little bit more thinking — charlietfl
– charlietfl, Commented Sep 26, 2015 at 4:08
Exactly, 500 users, 500 colors, its what my client wants. I understand your concern, but is what I need to do... And thank you for your time. :-( — Eusthace
– Eusthace, Commented Sep 26, 2015 at 4:09

Andrii Iushchuk · Accepted Answer · 2015-09-28 09:25:46Z

3

To set css style (e.g. color) on an HTML element you can use ngStyle directive. To generate color based on dynamic value add functions to your 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))
};

To use it in your view:

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

example: JSFiddle

answered Sep 28, 2015 at 9:25

Andrii Iushchuk

3761 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrii Iushchuk Over a year ago

@Eusthace be careful by using such behavior, because you can meet situation when generated color will be similar or the same with background color.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related