web-dev-qa-db-ja.com

AngularJS通貨フィルターの小数点/セントの削除

通貨フィルターの出力から小数点/セントを削除する方法はありますか？私はこのようなことをしています：

<div>{{Price | currency}}</div>

どの出力：

1,000.00ドル

代わりに、私はしたい：

1,000ドル

通貨フィルターを使用してそれを行うことはできますか？数字の前にドル記号を追加できることは知っていますし、独自のフィルターを作成することもできますが、既存の通貨フィルターに簡単な方法が存在することを望んでいました。

ありがとうございました。

angularjsfilterformattingangularjs-filter
64
Mike Pateras

Update：バージョン以降 1.3.-currencyFilter：オプションのパラメーターとしてfractionSizeを追加、参照- コミット および更新 plunker

{{10 | currency:undefined:0}}

2番目のパラメーターであるため、現在のロケール通貨記号を使用するには未定義で渡す必要があることに注意してください。

Update：これは、数字の前に表示される通貨記号に対してのみ機能することに注意してください。バージョン1.2.9の時点では、まだ小数点以下2桁にハードコードされています。

ここ は、angularのformatNumberのコピーを使用して、通貨の0 fractionSizeを有効にする修正バージョンです。

通常、これはロケール定義またはcurrencyFilter呼び出しのいずれかで構成可能にする必要がありますが、現在（1.0.4）小数点以下2桁にハードコーディングされています。

カスタムフィルター：

myModule.filter('noFractionCurrency',
  [ '$filter', '$locale',
  function(filter, locale) {
    var currencyFilter = filter('currency');
    var formats = locale.NUMBER_FORMATS;
    return function(amount, currencySymbol) {
      var value = currencyFilter(amount, currencySymbol);
      var sep = value.indexOf(formats.DECIMAL_SEP);
      if(amount >= 0) { 
        return value.substring(0, sep);
      }
      return value.substring(0, sep) + ')';
    };
  } ]);

テンプレート：

<div>{{Price | noFractionCurrency}}</div>

例：

Update：負の値を処理する際のバグを修正

114
Liviu T.

質問はかなり古いようで、与えられた答えは素晴らしいです。ただし、他にも役立つソリューションがあります（私のプロジェクトで使用しています）。

これは、通貨記号の接頭辞と正および負の値の接尾辞で非常にうまく機能しています。

カスタムフィルター：

angular.module('your-module', [])
    .filter('nfcurrency', [ '$filter', '$locale', function ($filter, $locale) {
        var currency = $filter('currency'), formats = $locale.NUMBER_FORMATS;
        return function (amount, symbol) {
            var value = currency(amount, symbol);
            return value.replace(new RegExp('\\' + formats.DECIMAL_SEP + '\\d{2}'), '')
        }
    }])

テンプレート：

<div>{{yourPrice| nfcurrency}}</div>

さまざまなロケールの例：

  • 10.00（en-gb）->£10
  • 20.00（en-us）->$ 20
  • -10.00（en-us）->（$ 10）
  • 30.00（da-dk）->30 kr
  • -30.00（da-dk）->-30 kr

米ドル および デンマーク語のライブデモをご覧くださいクローネ .

更新

この回避策は、AngularJS 1.2およびそれ以前のリリースのライブラリに適していることに注意してください。 AngularJS 1.3の時点で、 通貨 フォーマッターで小数サイズを指定する3番目のパラメーターを使用できます- "Number小数点以下の桁数に丸める」。

AngularJSローカリゼーションからのデフォルトの通貨形式を使用するには、undefined（nullまたはempty 動作しないでしょう）。 USドル および Danish Krone 。

32
Tom

検討する価値があるもう1つのことは、ロケールまたは通貨の種類が1つしかないことを知っている場合、通貨記号を数字の前に置き、そのような数字フィルターを使用できることです（米国通貨の場合）。

  ${{Price | number:0}}

新しいフィルターを使用せず、通貨が1つしかない場合は、より迅速な解決策が必要です。

30
JM Huret

遅いですが、誰かを助けることができるかもしれません

{{value | currency : 'Your Symbol' : decimal points}}

それでは、出力付きの例を見てみましょう

{{10000 | currency : "" : 0}}           // 10,000
{{10000 | currency : '$' : 0}}          // $10,000 
{{10000 | currency : '$' : 2}}          // $10,000.00 
{{10000 | currency : 'Rs.' : 2}}        // Rs.10,000.00
{{10000 | currency : 'USD $' : 2}}      // USD $10,000.00
{{10000 | currency : '#' : 3}}          // #10,000.000
{{10000 | currency : 'ANYTHING: ' : 5}} // ANYTHING: 10,000.00000

デモ を参照してください

18
Ali Adravi

これは別の同様のソリューションですが、10進数の.00を削除しますが、その他の小数は残します。

10.00ドルから10ドル

$ 10.20から$ 10.20

app.filter('noFractionCurrency', [ '$filter', '$locale', function(filter, locale) {
    var currencyFilter = filter('currency');
    var formats = locale.NUMBER_FORMATS;
    return function(amount, currencySymbol) {
        amount = amount ? (amount*1).toFixed(2) : 0.00;
        var value = currencyFilter(amount, currencySymbol);
        // split into parts
        var parts = value.split(formats.DECIMAL_SEP);
        var dollar = parts[0];
        var cents = parts[1] || '00';
            cents = cents.substring(0,2)=='00' ? cents.substring(2) : '.'+cents; // remove "00" cent amount
        return dollar + cents;
    };
}]);
5
Dustin

angularバージョン<1.3の解決策。i18nを使用する場合の最も簡単な方法は次のとおりです。

$filter('number')(x,0) + ' ' +$locale.NUMBER_FORMATS.CURRENCY_SYM;

このようにして、ロケールに基づいて正しいセパレーターと通貨記号でフォーマットされた数値が得られます。

3
AndreiC

別の解決策として、これは末尾のゼロを削除し、最も一般的な通貨の適切な通貨記号を見つけます。

{{10.00 | money：USD}}から10ドル

{{10.00 | money：EUR}}から€10

/**
 * @ngdoc filter
 * @name money
 * @kind function
 *
 * @description
 * Formats a number as a currency (ie $1,234.56), removing trailing zeros and using the     real currency symbol when possible. When no currency symbol is provided, default
 * symbol for current locale is used.
 *
 * @param {number} amount Input to filter.
 * @param {string=} symbol Currency symbol or identifier to be displayed.
 * @returns {string} Formatted number. *
 */
app.filter('money', [ '$filter', '$locale', function (filter, locale) {
var currencyFilter = filter('currency');
var formats = locale.NUMBER_FORMATS;

var getCurrencySymbol = function (code) {
    switch (code.toUpperCase()) {
        case 'EUR': //Euro
            return '€';

        case 'USD': //Dólar americano
        case 'MXN': //Peso mejicano
        case 'CAD': //Dólar de Canadá
        case 'AUD': //Dólar australiano
        case 'NZD': //Dólar neozelandés
        case 'HKD': //Dólar de Hong Kong
        case 'SGD': //Dólar de Singapur
        case 'ARS': //Peso argentino
            return '$';

        case 'CNY': //Yuan chino
        case 'JPY': //Yen japonés
            return '¥';

        case 'GBP': //Libra esterlina
        case 'GIP': //Libras de Gibraltar
            return '£';

        case 'BRL': //Real brasileño
            return 'R$';

        case 'INR': //Rupia india
            return 'Rp';

        case 'CHF': //Franco suizo
            return 'Fr';

        case 'SEK': //Corona sueca
        case 'NOK': //Corona noruega
            return 'kr';

        case 'KPW': //Won de Corea del Norte
        case 'KRW': //Won de Corea del Sur
            return '₩';

        default:
            return code;
    }
};

return function (amount, currency) {
    var value;
    if (currency) {
        value = currencyFilter(amount, getCurrencySymbol(currency));
    }
    else {
        value = currencyFilter(amount);
    }

    //Remove trailing zeros
    var regex = new RegExp("\\" + formats.DECIMAL_SEP + "0+", "i");
    return value.replace(regex, '');
};
} ]);
3
Javier Marín

AngularJS 1.2の場合、numberフィルターとcurrencyフィルターを単純に組み合わせることができます。

app.filter('noFractionCurrency', ['numberFilter', 'currencyFilter', function(numberFilter, currencyFilter) {
        return function(input, symbol) {
            var amount = numberFilter(input);
            return symbol + amount;
        };
    }]);
3
Marwan Aouida

angular-i18n （bower install angular-i18n）を使用する場合、デコレータを使用して、ロケールファイルのデフォルトを次のように変更できます。

$provide.decorator('$locale', ['$delegate',
  function ($delegate) {
    $delegate.NUMBER_FORMATS.PATTERNS[1].maxFrac = 0;
    $delegate.NUMBER_FORMATS.PATTERNS[1].minFrac = 0;
    return $delegate;
}]);

これは、コードで使用するすべての通貨フィルターに適用されることに注意してください。

2
Dormouse

@Liviu T.によって投稿されたフィルターを少し変更して、数字と特定の小数の後に記号が付いた通貨を受け入れるようにしました。

app.filter('noFractionCurrency',
[ '$filter', '$locale', function(filter, locale) {
  var currencyFilter = filter('currency');
  var formats = locale.NUMBER_FORMATS;
  return function(amount, num, currencySymbol) {
    if (num===0) num = -1;
    var value = currencyFilter(amount, currencySymbol);
    var sep = value.indexOf(formats.DECIMAL_SEP)+1;
    var symbol = '';
    if (sep<value.indexOf(formats.CURRENCY_SYM)) symbol = ' '+formats.CURRENCY_SYM;
    return value.substring(0, sep+num)+symbol;
  };
} ]);

例えば：

{{10.234 | noFractionCurrency:0}}
{{10.55555 | noFractionCurrency:2}}

出力：

$10
$10.56

デモ

2
bertslike

まさに私が必要なもの！

条件を追加して、Angularの通貨フィルターを完全に置き換え、@ Tomが上で見たフィルターの修正バージョンを使用します。これを行うためのより良い方法があると確信していますが、これまでのところうまくいくようです。


'use strict';
angular.module('your-module')
  .filter('nfcurrency', [ '$filter', '$locale', function ($filter, $locale) {
    var currency = $filter('currency'), formats = $locale.NUMBER_FORMATS;
    return function (amount, symbol) {
      var value = currency(amount, symbol), valArr = value.split(formats.DECIMAL_SEP);
      if(parseInt(valArr[(valArr.length - 1)]) > 0) {
        return value;
      } else {
        return value.replace(new RegExp('\' + formats.DECIMAL_SEP + '\d{2}'), '');
      }
    };
  }]);
2
Smccullough

そして、ここで最も近い1000ドルに切り上げたい場合： Live Demo ：

var app = angular.module('angularjs-starter', []);

app.filter('noFractionRoundUpCurrency',
    [ '$filter', '$locale', function(filter, locale) {
      var currencyFilter = filter('currency');
      var formats = locale.NUMBER_FORMATS;
      return function(amount, currencySymbol) {
        var value = currencyFilter(amount, currencySymbol);
        var sep = value.indexOf(formats.DECIMAL_SEP);
        if(amount >= 0) { 
                    if (amount % 1000 < 500){
                        return '$' + (amount - (amount % 500));
                    } else {
                        return '$' + (amount - (amount % 500) + 500);          
                    }

        }
        else{
                    if (-amount % 1000 < 500){
                        return '($' + (-amount - (-amount % 500)) + ')';
                    } else {
                        return '($' + (-amount - (-amount % 500) + 500)+ ')';          
                    }
        }
      };
    } ]);

app.controller('MainCtrl', function($scope) {

});
2
David Dehghan

Angular 4+

{{totalCost | currency : 'USD' : 'symbol' : '1.0-0' }}
0
Andrew Koper