javascript - 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 中文本的颜色，您需要修改它的容器元素。由于过滤器不知道该元素，您可以注入(inject)一个(坏主意)，或者使用指令而不是过滤器。

在您的代码中放置一个函数实际上是一种糟糕的处理方式。它可能必须触发多次，并且肯定会搞砸您尝试的任何类型的排序。

<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>