change text color from directive when innerHTML matches - angularjs

Question

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 1

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

Answer 2

Use ng-class for the same.
CSS
.colorChange {
color: green;
}
HTML
<div ng-repeat="col in selectedColumn" class="cellHldr ng-status-color" ng-class="lead[col.name] === 'open' ? 'colorChange': 'normalStyle'">{{lead[col.name]}}</div>
Will this approach work ?

Answer 3

if(element[0].innerHTML=='Open'){
element[0].style.color = "red";
}