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 -$10.00?

Answer 1

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 2

This is a popular way to represent negative currencies. Wikipedia:

In bookkeeping, amounts owed are often represented by red numbers, or a number in parentheses, as an alternative notation to represent negative numbers.

You can see in the Angular source code where they do this (negSuf/negPre):

function $LocaleProvider(){   this.$get = function() {     return {       id: 'en-us',        NUMBER_FORMATS: {         DECIMAL_SEP: '.',         GROUP_SEP: ',',         PATTERNS: [           { // Decimal Pattern             minInt: 1,             minFrac: 0,             maxFrac: 3,             posPre: '',             posSuf: '',             negPre: '-',             negSuf: '',             gSize: 3,             lgSize: 3           },{ //Currency Pattern             minInt: 1,             minFrac: 2,             maxFrac: 2,             posPre: '\u00A4',             posSuf: '',             negPre: '(\u00A4',             negSuf: ')',             gSize: 3,             lgSize: 3           }         ],         CURRENCY_SYM: '$'       },