Dynamically changing colour of the text using directive Angular JS

Question

My directive does not seem to be working, here is my code:

//profile colour directive
app.directive('profileColour', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var imageDiv = scope.$eval(attrs['profileColour']).imageId;
            var colour = scope.$eval(attrs['profileColour']).colour;
            var divName = '#name' + imageDiv;
            //$(divName).addClass("purpleText");
            $(divName).addClass("purpleText");
        }
    };
});

HTML:

            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th class="col-xs-2">
                            <span></span>
                        </th>
                        <th class="col-xs-8" ng-click="sort('firstName')">
                            <span class="glyphicon sort-icon" ng-show="sortKey=='firstName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                        </th>
                        <th class="col-xs-2">
                            <span></span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-click="showModal($event, user.emailAddress)" change-image="{imageId: {{$index}}, colour: 'blue'}" dir-paginate="user in users|orderBy:sortKey:reverse|filter:search|itemsPerPage:5">
                        <td>
                            <!--img class="round" src="/images/profile-placeholder.jpg" width="50" height="50">
                                </img> -->
                            <img class="round" src={{user.profileImageUrl}} width="50" height="50"></img>
                        </td>
                        <!-- <td><img src={ {user.profileImageUrl}} width="100" height="100"></img></td> -->
                        <td>
                            <div style="padding-top:1em"><span profile-colour="{imageId: {{$index}}, colour: 'blue'}" id='name{{$index}}'>{{user.firstName}}</span>
                                <br>{{user.lastName}}
                                <br>{{user.profession}}</div>
                        </td>
                        <td>
                            <div style="padding-top:1em">
                                <img id={{$index}} src="images/arrow-right-purple.png" width="50" height="50"></div>
                        </td>
                    </tr>
                </tbody>
            </table>

I want to be able to dynamically change the colour of the span:

> <span profile-colour="{imageId: {{$index}}, colour: 'blue'}"
> id='name{{$index}}'>{{user.firstName}}</span>

upon the table loading using the above directive by attaching a class, but it is not having any effect. My CSS is:

/*purple text */

.purpleText {
    color: #6c58bF;
    font-weight: 900;
    text-transform: uppercase;
    font-style: bolder;
}

How can I get this to work, thanks!

You can use ng-class for a really clean way to do this. What exactly determines the color on that data? Is it user.profileColour or something? I mean i see you have 'blue' there, but that's a hardcoded string (not dynamic)? — ajmajmajma
– ajmajmajma, Commented Oct 2, 2015 at 19:33
yep that sets it, I get it from a JSON object then I need to work out which class the property belongs too, so need a bunch of ifs. — bobo2000
– bobo2000, Commented Oct 2, 2015 at 19:38
Answered below, the second one you will not need a bunch of if's if you have all your classes yourcolorText, and can name all your color css classes accordingly. (but i don't know if you have any restrictions around that stuff) — ajmajmajma
– ajmajmajma, Commented Oct 2, 2015 at 19:46

ajmajmajma · Accepted Answer · 2015-10-02 19:47:31Z

1

If I am understanding this correctly, and you have the desired dynamic color choice stored in user.profileColour, then you can do something like this

<span  ng-class="{ 'purpleText' : user.profileColour === 'purple';  'greenText' : user.profileColour === 'green'}">

And so on.

You can abstract this to a function where you pass in user.profileColour and return the class as well, depending on where you want the logic (if you turn it into a function you could have it all in the controller). So something like -

<span ng-class="setColor(user.profileColour)" >

and in the controller

$scope.setColor = function(color) {
  //assuming profileColour is purple this would return "purpleText"
  return color + "Text";
}

This is assuming all the profileColour are strings.

edited Oct 2, 2015 at 19:47

answered Oct 2, 2015 at 19:42

ajmajmajma

14.3k25 gold badges83 silver badges139 bronze badges

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

2 Comments

bobo2000 Over a year ago

Thanks, the first approach didn't work, but the second one did. That is what I was looking for.

ajmajmajma Over a year ago

@bobo2000 yes the first one can be a bit longwinded if you have a lot of different colors, the second one is much cleaner if you have a bunch of classes you need to cover off! If this answered your question please mark so the question closes. Cheers!

Collectives™ on Stack Overflow

Dynamically changing colour of the text using directive Angular JS

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related