Why AngularJS currency filter formats negative numbers with parenthesis?

Question

Live Demo

Why this:

# Controller
$scope.price = -10;

# View
{{ price | currency }}

results in ($10.00) rather than

Answer 1

If you don't mind keeping the parenthesis and just want a quick and easy way to achieve this
eg: -($250.00) try the following:

<ul ng-repeat="data in customers">
  <li>
    Balance: 
    <span ng-if="data.balance<0">-</span>
    <span ng-if="data.balance>0">+</span>
    {{data.balance | currency}}
  </li>
</ul>  

If you want to remove the (), then you can create your own filter or try the other answers.

Answer 2

Do you mean display -$10.00 rather than ($10.00)?

The default, at least angularJs version 1.2.1 is to display with parentheses. Eg.: ($10.00)).

If so, this is my situation. I created a custom filter for that:

var app = angular.module('myApp');

app.filter('customCurrency', ["$filter", function ($filter) {       
  return function(amount, currencySymbol){
     var currency = $filter('currency');         

     if(amount.charAt(0) === "-"){
        return currency(amount, currencySymbol).replace("(", "-").replace(")", ""); 
     }

     return currency(amount, currencySymbol);
  };

}]);

So it delegates to the built-in currency filter and "decorates" or "un-decorates" the parentheses.

I couldn't find a way to change $LocaleProvider on the fly. If someone knows please let me know.

cheers Leonardo Correa

Answer 3

I know this is an old question, but the accepted answer is only answering why this happens, without a concrete solution to the problem. I think the "most correct way" of doing this, is to use a decorator like so:

angular
    .module('app')
    .config(['$provide', function($provide) {
        $provide.decorator('$locale', ['$delegate', function($delegate) {
          if($delegate.id == 'en-us') {
            $delegate.NUMBER_FORMATS.PATTERNS[1].negPre = '-\u00A4';
            $delegate.NUMBER_FORMATS.PATTERNS[1].negSuf = '';
          }
          return $delegate;
        }]);
      }]);

This is only called once, valid for any filter which depends on it, and you don't need a custom filter for your currency formatting.

Answer 4

Edit your angular.js file around line number -36180 change negPre and negSuf by removing - and putting parenthesis

For Example

Change From :

"NUMBER_FORMATS": {
"CURRENCY_SYM": "$",
"DECIMAL_SEP": ".",
"GROUP_SEP": ",",
"PATTERNS": [
  {
    "gSize": 3,
    "lgSize": 3,
    "maxFrac": 3,
    "minFrac": 0,
    "minInt": 1,
    "negPre": "-",
    "negSuf": "",
    "posPre": "",
    "posSuf": ""
  },
  {
    "gSize": 3,
    "lgSize": 3,
    "maxFrac": 2,
    "minFrac": 2,
    "minInt": 1,
    "negPre": "-\u00a4",
    "negSuf": "",
    "posPre": "\u00a4",
    "posSuf": ""
  }
]

}

To

"NUMBER_FORMATS": {
"CURRENCY_SYM": "$",
"DECIMAL_SEP": ".",
"GROUP_SEP": ",",
"PATTERNS": [
  {
    "gSize": 3,
    "lgSize": 3,
    "maxFrac": 3,
    "minFrac": 0,
    "minInt": 1,
    "negPre": "-",
    "negSuf": "",
    "posPre": "",
    "posSuf": ""
  },
  {
    "gSize": 3,
    "lgSize": 3,
    "maxFrac": 2,
    "minFrac": 2,
    "minInt": 1,
    "negPre": "(\u00a4",
    "negSuf": ")",
    "posPre": "\u00a4",
    "posSuf": ""
  }
]

}

Answer 5

It works better for me by checking negative number:

var app = angular.module('myApp');

app.filter('customCurrency', ["$filter", function ($filter) {       
    return function(amount, currencySymbol){
        var currency = $filter('currency');         

        if(amount < 0){
           return currency(amount, currencySymbol).replace("-", "(") + ')'
        }

        return currency(amount, currencySymbol);
    };
}]);

Answer 6

Update: Angular 1.4 no longer uses parentheses to indicate negative values but now uses the "-" symbol. Here is a link to a discussion: https://github.com/angular/angular.js/issues/12870

I used the decorator as described by marc to return the .negPre and .negSuf to use the parens.