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.

TheSharpieOne · Accepted Answer · 2013-09-11 15:29:18Z

11

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'.

edited Sep 11, 2013 at 15:29

answered Sep 11, 2013 at 15:22

TheSharpieOne

25.7k9 gold badges72 silver badges80 bronze badges

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

1 Comment

user2756589 Over a year ago

This works and it is a very good example. Now I understand how to use ng-class. Thanks

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related