删除AngularJS货币filter十进制/分
有没有办法从货币filter的输出中去掉小数点/仙? 我正在做这样的事情:
<div>{{Price | currency}}</div>
哪些产出:
$ 1,000.00
相反,我想:
$ 1,000个
这可以使用货币filter来完成吗? 我知道我可以在一个数字上加上一个美元符号,我可以编写我自己的filter,但我希望现有的货币filter存在一个简单的方法。
谢谢。
更新 :从版本1.3.0 – currencyFilter:添加fractionSize作为可选参数,请参阅提交和更新的plunker
{{10 | currency:undefined:0}}
请注意,这是第二个参数,所以您需要传递undefined以使用当前的区域设置货币符号
更新 :请注意,这只适用于在数字之前显示的货币符号。 从1.2.9版本开始,硬编码到2位小数。
这是一个修改后的版本,它使用angular度的formatNumber的副本为货币启用0分数。
通常这应该可以在locale定义或currencyFilter调用中configuration,但现在( 1.0.4 )硬编码到2位小数。
定制filter:
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>
例:
- 演示
更新 :修正了处理负值时的错误
这个问题似乎很老,给出的答案是好的。 不过,还有另外一种解决scheme可以帮助我(在我的项目中使用)。
这与货币符号前缀工作得很好,后缀正负值的数字也是一样。
定制filter:
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(zh-cn) – > ($ 10)
- 30.00(da-dk) – > 30 kr
- -30.00(da-dk) – > -30 kr
请看看美元和丹麦克朗的现场演示。
更新
请注意,这个解决方法适用于AngularJS 1.2和更早版本的库。 从AngularJS 1.3起,您可以使用货币格式化程序和第三个参数,指定分数大小 – “小数点后四舍五入的小数位数” 。
请注意,为了使用来自AngularJS本地化的默认货币格式,您必须使用货币符号(第二个参数)设置为undefined
( null
或空将不起作用)。 示例在美元和丹麦克朗的演示。
另一个值得考虑的事情是,如果您知道只有一种区域设置或一种货币types,您可以将货币符号放在数字之前,然后像使用美国货币那样使用数字filter。
${{Price | number:0}}
更多的快速解决scheme,如果你不想抛出一个新的filter,只有一种货币。
这是迟到了,但可能会有所帮助
{{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
看演示
这是另一个类似的解决scheme,但是它将除去.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; }; }]);
另一个解决scheme是删除尾部零,并为最常见的货币find适当的货币符号:
{{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, ''); }; } ]);
对于angular度版本<1.3的解决scheme,如果使用i18n最简单的方法是:
$filter('number')(x,0) + ' ' +$locale.NUMBER_FORMATS.CURRENCY_SYM;
通过这种方式,您可以使用基于区域设置的正确分隔符和货币符号来格式化数字。
在这里,如果你想四舍五入到最近的$ 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) { });
正是我需要的!
我添加了条件来完全取代Angular的货币filter,只是使用@Tom上面看到的filter的修改版本。 我相信有更好的方法来做到这一点,但迄今为止似乎对我很好。
'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}'), ''); } }; }]);
我修改了一下@Liviu T.发布的filter,在数字和一定数量的小数之后接受带有符号的货币:
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
演示
对于AngularJS 1.2,您可以简单地组合number
和currency
filter
app.filter('noFractionCurrency', ['numberFilter', 'currencyFilter', function(numberFilter, currencyFilter) { return function(input, symbol) { var amount = numberFilter(input); return symbol + amount; }; }]);
如果您使用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; }]);
请注意,这将适用于您的代码中的所有货币filter使用。