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

Answer 3

您还可以使用ng-style并向控制器添加功能。

例如：

＆＃13;

$scope.negativeValue=function(myValue){
  var num = parseInt(myValue);
  
  if(num < 0){
    var css = { 'color':'red' };
    return css;
  }
}

＆＃13;

<td ng-style="negativeValue(myScopeValue)">{{ myScopeValue | currency }}</td>

＆＃13;

Answer 4

尝试

 <th class="text-center" ng-class="{myRedClass: monthCategoryTotalPredict  <0}" >
      {{monthCategoryTotalPredict = ......}}</th>

然后添加css类规则以更改颜色

Answer 5

这就是我在我的应用程序中做到的。

上述所有解决方案都会重新计算该值，如果它是由函数产生的，则该值可能效率低。

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>

这是一个plunker链接： - http://plnkr.co/edit/X42mE9LpagGRrasOckqQ?p=preview

希望它有所帮助!!

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

5 个答案: