我将如何使用angularjs指令更改基于值的字体颜色?

时间:2021-05-07 19:40:55

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.

如果“过去”的值为是,则span: {{somedue.date}} 中的值将为红色,否则如果“past”为no,则字体颜色为黑色。我是angularjs的新手,所以如果你可以建议我怎样才能使用angularjs,我会很感激。

1 个解决方案

#1


11  

You can use ng-class

你可以使用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.

其中将应用红色或黑色类。您可以通过CSS设置样式以使颜色变为红色/黑色。

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

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

在您的示例中,您的数据结构很奇怪,我已经修改它以展示ng-class。

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

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

#1


11  

You can use ng-class

你可以使用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.

其中将应用红色或黑色类。您可以通过CSS设置样式以使颜色变为红色/黑色。

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

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

在您的示例中,您的数据结构很奇怪,我已经修改它以展示ng-class。

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

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