Menu
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.
960
Users can change the style of the element using the . style property. Also, we can change the specific style, such as element color, background color, size, etc. In our case, we will change the color attribute values to change the font color.
To set the font color in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property color. HTML5 do not support the <font> tag, so the CSS style is used to add font color.
AngularJS DirectivesThe ng-app directive initializes an AngularJS application. The ng-init directive initializes application data. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. Read about all AngularJS directives in our AngularJS directive reference.
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'.
64
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
