Javascript Angular Js 货币，后为欧元符号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27547680/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular Js currency, symbol euro after
提问by corsaro
How to move the symbol euro from the front of the value to after it?
如何将符号欧元从值的前面移到后面？
Example:
例子：
{{product.price | currency : ""}}will produce 12.00
{{product.price | currency : ""}}会产生 12.00
but I would like 12.00
但我想 12.00
回答by Frederik Kammer
You don't have to hack the currency filter!
您不必破解货币过滤器！
AngularJS has a great support for i18n/l10n. The currency filter uses the default currency symbol from the locale service and positions it based on the locale settings.
AngularJS 对 i18n/l10n 有很好的支持。货币过滤器使用来自区域设置服务的默认货币符号，并根据区域设置对其进行定位。
So it's all about supporting and setting the right locale.
所以这一切都是为了支持和设置正确的语言环境。
<script src="i18n/angular-locale_de-de.js"></script>
If you are using npmor bowerall locales are available via the angular-i18npackage.
如果您正在使用npm或bower所有语言环境都可以通过angular-i18n包获得。
<span>{{ product.price | currency }}</span>
will now produce the following output:
现在将产生以下输出：
65,95
Supporting multiple localizations
支持多种本地化
If you want to support multiple localizations be careful with the currency symbol as it changes to the default currency of the used locale. But 65,95 are different to $65,95. Provide the currency symbol as parameter to be safe:
如果您想支持多种本地化，请注意货币符号，因为它会更改为所用语言环境的默认货币。但65,95 与$65,95. 提供货币符号作为参数以确保安全：
<span>{{ product.price | currency:'' }}</span>
In de-dethe output would still be 65,95 but if the location is eg. en-usit would be 65.95(which is despite some other sayings the correct format to display euro prices in English).
在de-de输出中仍然是65,95 但如果位置是例如。en-us它将是65.95（尽管有一些其他说法，但这是用英语显示欧元价格的正确格式）。
To learn more about angular and i18n/l10n refer to the developer guide.
要了解有关 angular 和 i18n/l10n 的更多信息，请参阅开发人员指南。
回答by Reactgular
You can't with the currency filter. You could write your own, or just use the number filter.
您不能使用货币过滤器。您可以自己编写，也可以仅使用数字过滤器。
{{(produce.price | number:2) + ""}}
{{(produce.price | number:2) + ""}}
回答by drskur
use this trick.
使用这个技巧。
<div>{{product.price | currency : '' }} </div>
回答by Zauker
The solutions proposed are all dirty.
提出的解决方案都是肮脏的。
at first, the filter allow change symbol by add it as parameter:
首先，过滤器通过将其添加为参数来允许更改符号：
{{product.price | currency : ""}}
but the right way is localize your app as suggested by @Andreas if you localize your app for example with italian locale setting (it-it) inside your app you need only invoke the filter to obtain the sign.
但正确的方法是按照@Andreas 的建议本地化您的应用程序，如果您本地化您的应用程序，例如在您的应用程序中使用意大利语区域设置 (it-it)，您只需要调用过滤器来获取符号。
{{product.price | currency }}
Italian locale setting put the Euro sign before the currency value. You could change che locale value, or much better override them as proposed in the follow linked answer:
意大利语言环境设置将欧元符号置于货币值之前。您可以更改 che 区域设置值，或者按照以下链接答案中的建议更好地覆盖它们：
Why AngularJS currency filter formats negative numbers with parenthesis?
you could override the locale setting put your currency symbol (\u00A4) as a prefix or suffix for positive value and negative too.
您可以覆盖区域设置，将您的货币符号 (\u00A4) 作为正值和负值的前缀或后缀。
app.config(['$provide', function($provide) {
$provide.decorator('$locale', ['$delegate', function($delegate) {
if($delegate.id == 'it-it') {
$delegate.NUMBER_FORMATS.PATTERNS[1].negPre = '\u00A4\u00a0-';
$delegate.NUMBER_FORMATS.PATTERNS[1].negSuf = '';
$delegate.NUMBER_FORMATS.PATTERNS[1].posPre = '\u00A4\u00a0';
$delegate.NUMBER_FORMATS.PATTERNS[1].posSuf = '';
}
return $delegate;
}]);
}]);
so after this instruction the filter:
所以在这条指令之后过滤器：
{{product.price | currency}}
will produce the follow output
将产生以下输出
12
回答by samuelj90
Angularjs has a great support for internationalization and localization. The application of internationalization and localization depends on the scope of your application. For example if your application only support euro then you need only the localization for euro and does not require all the currency and its formatting.
Angularjs 对国际化和本地化有很大的支持。国际化和本地化的应用取决于您的应用范围。例如，如果您的应用程序仅支持欧元，那么您只需要欧元的本地化，而不需要所有货币及其格式。
In such situation (Assuming your situation is similar to above ) you can create an app configuration and set locale as the localization you required using some decorators. A decorator function intercepts the creation of a service, allowing it to override or modify the behavior of the service.
在这种情况下（假设您的情况与上面类似），您可以创建一个应用程序配置并使用一些装饰器将语言环境设置为您需要的本地化。装饰器函数拦截服务的创建，允许它覆盖或修改服务的行为。
angular
.module('app', [])
.config(['$provide', function($provide) {
$provide.decorator('$locale', ['$delegate', function($delegate) {
$delegate.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: 0,
maxFrac: 1,
posPre: '\u00A4',
posSuf: '',
negPre: '(\u00A4',
negSuf: ')',
gSize: 3,
lgSize: 3
}],
CURRENCY_SYM: ''
}
return $delegate;
}]);
}])
.controller('appController', ['$scope', function($scope) {
$scope.price = 20.55;
}])<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="appController">
Price : {{price | currency}}
</div>
</div>The above configuration shows all possible values for decimal and currency settings. You can change according to your requirements at app level.
以上配置显示了小数和货币设置的所有可能值。您可以根据应用级别的要求进行更改。
If you dont want the effect to be in entire application better is to go for a directive
如果您不希望整个应用程序中的效果更好，则可以使用指令
回答by Samantha A
It's quite an old question, it's different these days.. Maybe it was back then aswell..
这是一个很老的问题，现在不同了..也许当时也是..
So if someone else finds this..
所以如果别人发现这个..
But you need to include the correct locale to get the correct currency formatting in the currency filter.
但是您需要包含正确的区域设置才能在货币过滤器中获得正确的货币格式。
Check the angular documentation, for example dutch currency formatting is 5,00 While english is 5,00 and american is 5.00
检查角度文档，例如荷兰货币格式为 5,00，而英语为 5,00，美国为 5.00
回答by Mugshep
Using the locale(as explained in the answer in this thread -
at Angular Js currency, symbol euro after) seems like the mostcorrect way to do it, but it doesn't seem to offer the flexibility to put the currency symbol or name where you want it relative to the value you're referencing to. If you need to have your currency symbol after your value, you could have a separate product.currencyfield and interpolate that after (or before) your price value.
使用locale（如该线程的答案中所述 - 在Angular Js 货币中，符号 euro after）似乎是最正确的方法，但它似乎没有提供将货币符号或名称放在您所在位置的灵活性希望它相对于您引用的值。如果您需要在您的值之后使用货币符号，您可以有一个单独的product.currency字段并在您的价格值之后（或之前）插入该字段。
So if you have product.price = 40and product.currency = '', you could display it as 40 with {{product.price}} {{product.currency}}. Or 40 by reversing the fields: {{product.currency}} {{product.price}}.
所以如果你有product.price = 40and product.currency = ''，你可以用 40 显示它{{product.price}} {{product.currency}}。或 40 通过反转字段：{{product.currency}} {{product.price}}。
You'd probably want to format the product.pricevalues via the decimal pipe if you did that (https://angular.io/api/common/DecimalPipe). - So "40.00 " would be : {{product.amount | number:'2.2-2'}} {{product.currency}}.
product.price如果您这样做了，您可能希望通过十进制管道格式化值（https://angular.io/api/common/DecimalPipe）。- 所以“40.00”将是：{{product.amount | number:'2.2-2'}} {{product.currency}}。
fyi - in this case, I'd probably have a separate field product.currencyand product.currencySymbol(e.g. "USD" and "$" respectively), but then you're getting more into the functionality of the localeas referenced in the other answer I link above. But if you need to place the currency name or symbol in a different location relative to the value than what Angular will let you do via its native pipes, and want to use a currency that's specific to a record or set that you're working with without hard-coding its symbol or name on the page (e.g. if you have multiple currencies you're displaying), this is one way to do it dynamically.
仅供参考 - 在这种情况下，我可能会有一个单独的字段product.currency和product.currencySymbol（例如分别为“USD”和“$”），但是随后您将更多地了解locale我在上面链接的另一个答案中引用的功能。但是，如果您需要将货币名称或符号放置在相对于值的不同位置，而不是 Angular 允许您通过其本地管道执行的操作，并且想要使用特定于您正在使用的记录或集合的货币无需在页面上对其符号或名称进行硬编码（例如，如果您要显示多种货币），这是一种动态实现的方法。
回答by sgrillon
I use this solution in my project (in production) in France (It must ALWAYS show 5.00, NEVER show 5.00):
我在法国的项目（生产中）中使用此解决方案（它必须始终显示 5.00，从不显示 5.00）：
<span>Price: {{product.price| currency:""}} </span>
Please, read the real question of this post (Angular Js currency, symbol euro after) before downvote too quickly!!!!!
请阅读这篇文章的真正问题（Angular Js 货币，之后是欧元符号），然后再过快投票！！！！！！
回答by ng-helper
You can create a filter :
您可以创建一个过滤器：
app.filter('euroFormat', function () {
return function (input) {
return input+' \u20AC';
};
});
and apply it on your html code with :
并将其应用于您的 html 代码：
<span>Price: {{product.price| euroFormat}}</span>
