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

时间:2013-09-11 15:13:14

标签: angularjs angularjs-directive

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

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

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

1 个答案:

答案 0 :(得分:11)

您可以使用ng-class

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

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

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

您的数据结构在您的示例中很奇怪,我的数据结构已被修改为展示ng-class

另外:您可以使用true / false,而无需与'yes' / 'no'进行字符串比较。