如何根据本地代码（即 en_GB、it_IT）格式化价格？

Question

如何根据本地代码（即 en_GB、en_AG、de_DE）设置价格格式。最好用 angular.

示例：

{{4950.00|localCurrency:en_GB}} : displays : £4,950.00

{{4950.00|localCurrency:it_IT}} : displays : 4.950,00€

{{4950.00|localCurrency:fr_FR}} : displays : 4 950,00€

请注意Angular的

{{myCurrencyValue | currency:'XXX'}}

是否不完全按照这里的要求去做。

Answer 1

我不知道您的货币过滤是否有可用的过滤器，但您可以创建一个使用 accounting.js 进行货币格式设置的自定义过滤器。

请查看下面或此 jsfiddle 中的演示。

angular.module('demoApp', [])
 .filter('localCurrency', LocalCurrencyFilter)
 .controller('MainController', MainController);

function MainController() {
 this.price = 4950;
}

function LocalCurrencyFilter($sce) {
    var locales = {
            'en_GB': {
                symbol : "£",
                decimal : ".",
                thousand: ",",
                precision : 2,
                format: "%s%v"
   },
         'it_IT': {
                symbol : "€",
                decimal : ",",
                thousand: ".",
                precision : 2,
                format: "%v%s"
   },
         'fr_FR': {
             symbol : "€",
                decimal : ",",
                thousand: " ",
                precision : 2,
                format: "%v%s"
            }
     },
        curLocale;
    
 return function(input, locale) {
        var curLocale = locales[locale];
        //console.log(curLocale);
        
        return accounting.formatMoney(input, curLocale); // €4.999,99
    };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/accounting.js/0.4.1/accounting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="MainController as mainCtrl">
    {{mainCtrl.price| localCurrency : 'en_GB'}}<br/>
    {{mainCtrl.price| localCurrency : 'it_IT'}}<br/>
    {{mainCtrl.price| localCurrency : 'fr_FR'}}
    <!--
{{4950.00|localCurrency:en_GB}} : displays : £4,950.00

{{4950.00|localCurrency:it_IT}} : displays : 4.950,00€

{{4950.00|localCurrency:fr_FR}} : displays : 4 950,00€
-->
</div>

Answer 2

当 Number/toLocaleString 的价格和货币格式将得到所有主要浏览器的完全支持时（现在缺少 Safari（2015 年 9 月））：

angular.module('myApp')
    .filter('localCurrency', function() {
        return function(value,format) {
            /*the array local=> currency,
              and the replacement of _ to - underneath
              are very specific to this case

              The main part of the solution resides
              in using toLocaleString !*/

            // Array of local/currency converter
            var localToCurrency =     {
                'en-GB':'GBP',
                'it-IT':'EUR',
                'fr-FR':'EUR',
            };
            //replace the _ to a - in your local string
            // (from en_GB to en-GB).
            var format = format.string('_','-');
            var currency = localToCurrency[format];

            var number = Number(value);
            return number.toLocaleString(format,
                {style: 'currency', currency: currency});
        };
});

然后你就可以这样使用了:

{{ price | localCurrency:fr_FR  }}

请注意，我还没有测试过，但应该可以。

您可以在此处检查兼容性：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

如何根据本地代码（即 en_GB、it_IT）格式化价格？

How to format a price according to a local code (i.e. en_GB, it_IT)?

javascript

format

currency

number-formatting

angularjs