我将如何使用 angularjs 指令根据值更改字体的颜色? [英] how will i change the color of a font based on a value using angularjs directives?

问题描述

我想创建一个指令，该指令可以根据一些未显示的值更改显示在跨度上的文本的字体颜色.
我有一个数组:

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"}];

如果过去"的值为yes，则span内的值:{{somedue.date}} 将是红色，否则如果过去"为否，则字体颜色为黑色.我是 angularjs 的新手，所以如果您能建议我如何使用 angularjs 做到这一点，我将不胜感激.

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.

推荐答案

你可以使用 ng-class

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

将应用红色或黑色类的位置.您可以通过 CSS 设置样式，使颜色变为红色/黑色.

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

示例:http://jsfiddle.net/TheSharpieOne/NHS73/

您的示例中的数据结构很奇怪，我的示例中已对其进行了修改以展示 ng-class.

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

另外:您可以使用 true/false 而不需要对 'yes'/'no 进行字符串比较'.

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

这篇关于我将如何使用 angularjs 指令根据值更改字体的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！