how will i change the color of a font based on a value using angularjs directives?

Question

I would like to create a directive that can change the font color of the text displayed on a span based on some value that is not displayed.
I have an array:

 $scope.due =[{somedate: "April.8.2010"}, {past:"yes"}];

If the value of "past " is yes, then the value inside the span: <span>{{somedue.date}}</span> will be color red, else if "past" is no, then font color is black. I am new with angularjs so i would appreciate it if you can suggest on how can i do this using angularjs.

Answer 1

You can use ng-class

<span ng-class="{red: past == 'yes', black: past == 'no'}">{{somedue.date}}</span>

where the classes red or black will be applied. You can style those via CSS to make the color red / black.

Example: http://jsfiddle.net/TheSharpieOne/NHS73/

Your data structure was odd in your example, it has been modified in mine to showcase ng-class.

Also: You could use true / false and not need to do a string comparison to 'yes'/'no'.