Angular JS - Number filter - Change colour when negative

Question

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

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?

Thanks in advance!

Use ng-class. You can set the class dynamically based on an expression, like monthCategoryTotalPredict >= 0. — Zack Argyle
– Zack Argyle, Commented Dec 30, 2013 at 17:27

Mike Robinson · Accepted Answer · 2013-12-30 17:29:38Z

12

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.

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>

answered Dec 30, 2013 at 17:29

Mike Robinson

25.2k8 gold badges64 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

erdimeola · Accepted Answer · 2013-12-30 17:28:12Z

5

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.

for example;

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

detailed documentation : http://docs.angularjs.org/api/ng.directive:ngClass

answered Dec 30, 2013 at 17:28

erdimeola

8548 silver badges17 bronze badges

Comments

RJohn · Accepted Answer · 2015-04-14 16:39:18Z

4

You can also use ng-style and add a function to your controller.

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>

answered Apr 14, 2015 at 16:39

RJohn

1213 bronze badges

1 Comment

Antony Scott Over a year ago

thanks, I used this but with ng-class instead of ng-style

charlietfl · Accepted Answer · 2013-12-30 17:28:40Z

2

Try

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

Then add a css class rule to change color

answered Dec 30, 2013 at 17:28

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

Vikas Gautam · Accepted Answer · 2015-12-21 19:14:01Z

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

Hope it helps!!

Collectives™ on Stack Overflow

Angular JS - Number filter - Change colour when negative

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related