为什么AngularJS货币过滤器用括号格式化负数?

时间:2013-07-03 06:37:13

标签: angularjs angularjs-filter

Live Demo

为什么:

# Controller
$scope.price = -10;

# View
{{ price | currency }}

会产生($10.00)而不是-$10.00

7 个答案:

答案 0 :(得分:76)

我知道这是一个老问题,但接受的答案只是回答为什么这种情况发生,而没有具体解决问题的方法。我认为这样做的“最正确的方法”是使用像这样的装饰器:

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;
        }]);
      }]);

这只会被调用一次,对任何依赖它的过滤器都有效,并且您不需要为您的货币格式设置自定义过滤器。

答案 1 :(得分:31)

这是一种代表负面货币的流行方式。 Wikipedia

  

在簿记中,欠款通常用红色数字或括号中的数字表示,作为代表负数的替代符号。

您可以在Angular源代码中看到他们执行此操作的位置(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: '$'
      },

答案 2 :(得分:17)

通过检查负数来对我有效:

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);
    };
}]);

答案 3 :(得分:9)

你的意思是显示 - $ 10.00而不是($ 10.00)?

默认情况下,至少angularJs版本1.2.1将显示括号。例如:($ 10.00))。

如果是这样,这就是我的情况。我为此创建了一个自定义过滤器:

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);
  };

}]);

因此它委托内置货币过滤器并“装饰”或“取消装饰”括号。

我找不到一种方法来动态更改$ LocaleProvider。如果有人知道,请告诉我。

欢呼声 莱昂纳多科雷亚

答案 4 :(得分:6)

更新:Angular 1.4不再使用括号表示负值,但现在使用“ - ”符号。以下是讨论的链接:https://github.com/angular/angular.js/issues/12870

我使用marc描述的装饰器返回.negPre和.negSuf来使用parens。

答案 5 :(得分:1)

如果您不介意保留括号,只想快速简便地实现此目的,例如:90000.0请尝试以下操作:

Double result = f2.andThen(f1).apply(x);

如果您要删除30000.0,则可以创建自己的过滤器或尝试其他答案。

答案 6 :(得分:0)

编辑行号 -36180 的angular.js文件 通过删除-并加上括号来更改negPre和negSuf

例如

更改自:

"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": ""
  }
]

}

收件人

"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": ""
  }
]

}