Abhishek Asthana Abhishek Asthana - 9 months ago 38
AngularJS Question

change text color from directive when innerHTML matches

I have a page where I am rendering many columns with the help of the ng-repeat.


<div ng-repeat="col in selectedColumn" class="cellHldr ng-status-color">{{lead[col.name]}}</div>

Now I have made a directive ngStatusColor

.directive('ngStatusColor', function () {
return {
restrict: "C",
compile: function (tElement, tAttributes) {
return {
post: function postLink( scope, element, attributes ) {
console.log("element",element[0].innerHTML );

I need to color the text of that column which has the
like 'open','closed'. Rest should be left as it is


Since you are going the innerHtml way , you can just add a font tag to the inner html to change the color :

       element[0].innerHTML="<font color='red'>"+element[0].innerHTML+"</font>";

The angular way to do this would be using ng-class.On your div which put the following :

ng-class="{ 'red': lead[col.name]=='Open', blue: lead[col.name]=='close' }"

And create two css classes red and blue:

.red {
 color: red;

.blue {
 color: blue;

What this will do this is when it will assign red class to your element if the value of lead[col.name] becomes 'Open' , Blue if 'Close'.

If you want to get more info about ng-class , I would recommend you to go through this link :ng-class uses