Search code examples
angularjsangularjs-filter

Why AngularJS currency filter formats negative numbers with parenthesis?


Live Demo

Why this:

# Controller
$scope.price = -10;

# View
{{ price | currency }}

results in ($10.00) rather than -$10.00?


Solution

  • 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: '$'
          },