javascript Angular JS - 数字过滤器 - 负数时改变颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20844321/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular JS - Number filter - Change colour when negative
提问by iamyojimbo
I am applying a number filter to the result of a function:
我正在对函数的结果应用数字过滤器：
<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>
Negative numbers are represented like this by default: (￡230.00).
默认情况下，负数表示如下：(￡230.00)。
My aim is to make them also change colour to red. How can I do this in Angular JS? Can this be part of the filter? Can I override the filter to modify it's default behaviour slightly without a complete rewrite?
我的目标是让它们也将颜色变为红色。我怎样才能在 Angular JS 中做到这一点？这可以成为过滤器的一部分吗？我可以覆盖过滤器以稍微修改它的默认行为而不完全重写吗？
Thanks in advance!
提前致谢！
回答by Mike Robinson
In order to change the color of text in HTML, you'll need to modify it's container element. Since the filter doesn't know about the element, you can either inject one (bad idea), or use a directive instead of a filter.
为了更改 HTML 中文本的颜色，您需要修改它的容器元素。由于过滤器不知道元素，您可以注入一个（坏主意），或者使用指令而不是过滤器。
Putting a function in your code is actually a bad way to handle things. It may have to fire multiple times, and will certainly screw up any kind of sorting you attempt.
在你的代码中放置一个函数实际上是一种糟糕的处理方式。它可能必须多次触发，并且肯定会搞砸您尝试的任何类型的排序。
<th class="text-center" ng-class="{ red: calculateSurplus(monthCategoryTotalPredict, monthCategoryTotalActual) < 0 }">{{calculateSurplus(monthCategoryTotalPredict, monthCategoryTotalActual) | currency:currencySymbol}}</th>
I would honestly perform these calculations ahead of time, so that it looks like this.
老实说，我会提前执行这些计算，因此它看起来像这样。
<th class="text-center" ng-class="{ red: surplus < 0 }">{{surplus | currency:currencySymbol}}</th>
回答by erdimeola
You can use ng-class to define conditional classes. You can create a css class which presents numbers as red and use it in ng-class attribute.
您可以使用 ng-class 来定义条件类。您可以创建一个将数字显示为红色的 css 类并在 ng-class 属性中使用它。
for example;
例如;
<td ng-class="{'className': variable < 0}">{{variable}}</td>
detailed documentation : http://docs.angularjs.org/api/ng.directive:ngClass
回答by RJohn
You can also use ng-style and add a function to your controller.
您还可以使用 ng-style 并向控制器添加功能。
for example:
例如：
$scope.negativeValue=function(myValue){
var num = parseInt(myValue);
if(num < 0){
var css = { 'color':'red' };
return css;
}
}<td ng-style="negativeValue(myScopeValue)">{{ myScopeValue | currency }}</td>回答by charlietfl
Try
尝试
<th class="text-center" ng-class="{myRedClass: monthCategoryTotalPredict <0}" >
{{monthCategoryTotalPredict = ......}}</th>
Then add a css class rule to change color
然后添加一个css类规则来改变颜色
回答by Vikas Gautam
That's how it did it in my app.
这就是它在我的应用程序中的做法。
All of the solutions above would recalculate the value, which could be inefficient, if it is resulted by a function.
上述所有解决方案都会重新计算该值，如果它是由函数产生的，那么这可能是低效的。
angular.module("myApp", [])
.controller("myCtrl", myCtrl)
.directive("colorUp", colorUp)
function myCtrl($scope) {
$scope.num1 = 1
$scope.num2 = -1
$scope.num3 = 0
}
function colorUp() {
return {
restrict: "A",
link: linkFunc
}
function linkFunc (scope, element, attributes) {
//adding an event handler to see elements' value changes
element.on("DOMSubtreeModified", onValChange)
function onValChange () {
var eleVal = deComma(element.text())
var color = (eleVal > 0) ? "green": (eleVal < 0) ? "red": ""
element.attr("class", "ng-binding " + color)
}
function deComma(text) {
return (text ? (text+"").replace(/,/g, "") : "")
}
}
}<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="script.js"></script>
<style>
.red {color: red;}
.green {color: green;}
input { width : 50px;}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<h3>Reusable Custom directive for coloring nums.</h3>
<input type="number" ng-model="num1" placeholder="Enter first number here!!">
<label color-up>{{num1 | number:2}}</label>
<br>
<input type="number" ng-model="num2" placeholder="Enter second number here!!">
<label color-up>{{num2 | number:2}}</label>
<br>
<input type="number" ng-model="num3" placeholder="Enter second number here!!">
<label color-up>{{num3 | number:2}}</label>
</body>
</html>here is a plunker link:- http://plnkr.co/edit/X42mE9LpagGRrasOckqQ?p=preview
这是一个 plunker 链接：- http://plnkr.co/edit/X42mE9LpagGRrasOckqQ?p=preview
Hope it helps!!
希望能帮助到你！！
