Angular JS - 数字过滤器 - 负数时更改颜色

Question

我正在对函数的结果应用数字过滤器:

<tr class="text-center">
    <th class="text-center">{{monthCategoryTotalPredict = getCategoryMonthTotal(costDirection, month, category, "predict")  | currency:currencySymbol}}</th>
    <th class="text-center">{{monthCategoryTotalActual  = getCategoryMonthTotal(costDirection, month, category, "actual")   | currency:currencySymbol}}</th>
    <th class="text-center">{{calculateSurplus(monthCategoryTotalPredict, monthCategoryTotalActual)  | currency:currencySymbol}}</th>
</tr>

默认情况下,负数表示如下:(£230.00).

我的目标是让它们也变成红色.我怎么能在Angular JS中做到这一点？这可以成为过滤器的一部分吗？我是否可以覆盖过滤器以稍微修改它的默认行为而不进行完全重写？

提前致谢!

Answer 1

为了更改HTML中文本的颜色,您需要修改它的容器元素.由于过滤器不知道元素,您可以注入一个(坏主意),或使用指令而不是过滤器.

在函数中添加函数实际上是一种处理事物的坏方法.它可能需要多次触发,并且肯定会搞砸你尝试的任何类型的分类.

<th class="text-center" ng-class="{ red: calculateSurplus(monthCategoryTotalPredict, monthCategoryTotalActual) < 0 }">{{calculateSurplus(monthCategoryTotalPredict, monthCategoryTotalActual)  | currency:currencySymbol}}</th>

我会诚实地提前完成这些计算,所以它看起来像这样.

<th class="text-center" ng-class="{ red: surplus < 0 }">{{surplus | currency:currencySymbol}}</th>

Answer 2

您可以使用ng-class来定义条件类.您可以创建一个css类,将数字显示为红色,并在ng-class属性中使用它.

例如;

<td ng-class="{'className': variable < 0}">{{variable}}</td>

详细文档:http://docs.angularjs.org/api/ng.directive:ngClass