Abhishek Asthana Abhishek Asthana - 5 months ago 26
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.

HTML

<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 );
if(element[0].innerHTML=='Open'){
console.log("hellooo");
}
}
}
}
}
});


I need to color the text of that column which has the
{{lead[col.name]}}
like 'open','closed'. Rest should be left as it is

Answer

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

 if(element[0].innerHTML=='Open'){
       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