64

有没有办法从货币过滤器的输出中删除小数/美分？我正在做这样的事情：

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

哪个输出：

$1,000.00

相反，我想：

1,000 美元

可以使用货币过滤器来完成吗？我知道我可以在数字前加上美元符号，并且可以编写自己的过滤器，但我希望现有货币过滤器存在一个简单的方法。

谢谢你。

4

12 回答 12

117

更新：从1.3.0版开始 -currencyFilter ：添加 fractionSize 作为可选参数，请参阅提交 和更新的 plunker

{{10 | currency:undefined:0}}

请注意，它是第二个参数，因此您需要传入 undefined 以使用当前的语言环境货币符号

更新：请注意，这仅适用于显示在数字之前的货币符号。从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>

例子：

更新：修复了处理负值时的错误

于 2013-02-09T11:07:14.213 回答
32

这个问题似乎很老了，给出的答案很好。但是，还有另一种替代解决方案也可以提供帮助（我在我的项目中使用）。

这非常适用于货币符号前缀以及正负值的数字后缀。

自定义过滤器：

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 克朗
  • -30.00 (da-dk) -> -30 克朗

请查看美元和丹麦克朗的现场演示。

更新

请注意，此解决方法适用于 AngularJS 1.2 和早期版本的库。从AngularJS 1.3开始，您可以使用带有指定分数大小的第三个参数的货币格式化程序 - “将金额四舍五入的小数位数”。

请注意，为了使用来自 AngularJS 本地化的默认货币格式，您必须将货币符号（第二个参数）设置为undefined（null否则为空将不起作用）。美元和丹麦克朗的演示示例。

于 2013-07-08T21:00:42.617 回答
31

另一件值得考虑的事情是，如果您知道您只有一种语言环境或一种货币，您可以将货币符号放在数字之前，然后像这样使用数字过滤器（对于美国货币）。

  ${{Price | number:0}}

如果您不想添加新过滤器并且只有一种货币，则可以使用更多快速修复解决方案。

于 2013-12-18T16:30:57.867 回答
19

已经晚了，但可能对某人有帮助

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

查看演示

于 2016-04-12T18:15:10.327 回答
5

这是另一个类似的解决方案，但它删除了小数点 .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;
    };
}]);
于 2014-05-25T00:51:36.157 回答
4

角度版本 < 1.3 的解决方案，如果您使用 i18n，最简单的方法是：

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

这样，您就可以根据区域设置使用正确的分隔符和货币符号格式化数字。

于 2014-11-06T10:15:57.240 回答
3

另一种解决方案是删除尾随零并为最常见的货币找到正确的货币符号：

{{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, '');
};
} ]);
于 2014-07-01T19:47:58.923 回答
2

如果你想四舍五入到最接近的 1000 美元： 现场演示：

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

});
于 2013-06-21T07:08:16.477 回答
2

正是我需要的！

我添加了一个条件来完全替换 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}'), '');
      }
    };
  }]);

于 2014-05-01T14:35:56.763 回答
2

我对@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

演示

于 2014-07-15T10:14:44.953 回答
2

如果您使用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;
}]);

请注意，这将适用于您的代码中使用的所有货币过滤器。

于 2015-02-03T15:52:38.253 回答
0

在角 4+

{{totalCost | currency : 'USD' : 'symbol' : '1.0-0' }}
于 2018-09-19T21:06:57.107 回答