web-dev-qa-db-ja.com

なぜAngularJS通貨フィルターは括弧で負の数をフォーマットするのですか？

ライブデモ

なぜこれ：

# Controller
$scope.price = -10;

# View
{{ price | currency }}

結果は($10.00) のではなく -$10.00？

angularjsangularjs-filter
30
Misha Moroshko

これは、負の通貨を表す一般的な方法です。 ウィキペディア ：

簿記では、負の数を表す別の表記法として、未払い額が赤い数字または括弧内の数字で表されることがよくあります。

あなたは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: '$'
      },
31
Ryan Cavanaugh

私はこれが古い質問であることを知っていますが、受け入れられた答えは答えるだけですwhyこれは起こり、問題の具体的な解決策はありません。これを行う「最も正しい方法」は、次のようにデコレータを使用することだと思います。

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

これは一度だけ呼び出され、それに依存するすべてのフィルターに有効であり、通貨のフォーマットにカスタムフィルターは必要ありません。

77
marc

負の数をチェックすることで私にとってはうまくいきます：

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

（$ 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をその場で変更する方法が見つかりませんでした。誰かが知っている場合は私に知らせてください。

レオナルド・コレア

10
Leonardo

更新：Angular 1.4は、負の値を示すために括弧を使用しなくなりましたが、現在は「-」記号を使用しています。ここにディスカッションへのリンクがあります： https://github.com/ angular/angular.js/issues/1287

Marcの説明に従ってデコレータを使用して、.negPreと.negSufを返し、括弧を使用しました。

6
user1488759

かっこを付けたまま気にせず、これをすばやく簡単に行う方法が必要な場合
例：-($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>

()を削除する場合は、独自のフィルターを作成するか、他の回答を試してください。

2
Felipe Alarcon

行番号を中心にangular.jsファイルを編集します-3618削除して括弧を入れて、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": ""
  }
]

}

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

}

1
Tinashe Robert