30

现场演示

为什么这个：

# Controller
$scope.price = -10;

# View
{{ price | currency }}

结果($10.00)而不是-$10.00？

4

7 回答 7

78

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

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

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

于 2015-05-08T11:08:47.987 回答
32

这是表示负货币的一种流行方式。维基百科：

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

您可以在 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: '$'
      },
于 2013-07-03T06:48:10.793 回答
18

通过检查负数对我来说效果更好：

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);
    };
}]);
于 2014-03-12T10:16:12.653 回答
10

您的意思是显示 -$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 的方法。如果有人知道，请告诉我。

欢呼莱昂纳多·科雷亚

于 2014-02-06T03:13:38.913 回答
6

更新：Angular 1.4 不再使用括号来表示负值，而是使用“-”符号。这是讨论的链接：https ://github.com/angular/angular.js/issues/12870

我使用了 marc 描述的装饰器来返回 .negPre 和 .negSuf 以使用括号。

于 2016-10-05T14:49:18.310 回答
2

如果您不介意保留括号，而只是想要一种快速简便的方法来实现这一点，
例如：-($250.00)尝试以下操作：

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

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

于 2015-12-07T19:39:16.993 回答
1

围绕行号-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": ""
  }
]

}

于 2018-10-25T17:04:16.057 回答