[英]How to display currency symbol using Javascript and Angular
I am in the process of learning Angular and am having trouble displaying a currency symbol. 我正在学习Angular,但无法显示货币符号。
I am calling my data from an api which is returning a formatted entry like this: 我正在从api调用数据,该api返回的格式如下:
"currency_formatted": "£20 Million"
In angular when I populate the formatted field: {{currency_formatted}} it outputs: 当我填充格式化字段:{{currency_formatted}}时,它以角度显示:
£20 Million
What I am expecting is: £20 Million 我期望的是: 2000万英镑
I can have the currency symbol returned in the api so: GBP, is there a way to use this to have the correctly formatted currency instead of passing the hex? 我可以在api中返回货币符号,例如:GBP,有没有办法使用它来具有正确格式的货币,而不是传递十六进制?
Any ideas would be appreciated! 任何想法,将不胜感激!
The hex is an HTML-encoded value. 十六进制是HTML编码的值。 You can HTML decode using the
ng-bind-html
directive, for example: 您可以使用
ng-bind-html
指令对HTML进行解码,例如:
<span ng-bind-html="amount"></span>
This needs to be sanitized to prevent exploits. 这需要进行清理以防止攻击。 To do so, you would need to add a dependency on
'ngSanitize'
, or use $sce
to trust this as HTML: 为此,您需要在
'ngSanitize'
上添加依赖'ngSanitize'
,或使用$sce
将其作为HTML信任:
$scope.amount = $sce.trustAsHtml("£20 Million");
=== ===
If, however, you can structure your amount into nominal value and currency symbol: 但是,如果可以将金额构造为名义价值和货币符号:
$scope.amount = {value: 20000000, symbol: '£'};
then you could is to use the currency
filter to display the amount: 那么您可以使用
currency
过滤器显示金额:
<span>{{amount.value | currency: amount.symbol:0}}</span>
This will display "£20,000,000"
- not "£20 Million"
(so, may not be what you need) 这将显示
"£20,000,000"
,而不是"£20 Million"
(因此,可能不是您所需要的)
You could just have the following in your HTML, taking advantage of the filter directive: 利用filter指令,您可以在HTML中添加以下内容:
<div>
<span>{{ amount | currency : '£' }}</span>
</div>
I figured this out with the help of a friend and with New Dev's answer above. 我在一个朋友的帮助下以及上面New Dev的回答中找到了答案。 This is what I have done:
这是我所做的:
In my HTML: 在我的HTML中:
<span ng-bind-html="currency_formatted | safeHtml"></span>
Then in my app I wrote a custom filter: 然后在我的应用程序中,我编写了一个自定义过滤器:
//Filter to use html from the api
app.filter('safeHtml', function($sce) {
return function(unsafeHtml) {
console.log(unsafeHtml);
return $sce.trustAsHtml(unsafeHtml);
}
})
Now this returns the html to be inserted into the page. 现在,这将返回要插入页面的html。
What was happening before was that Angular was sanitizing the result and escaping the & sign... 之前发生的是Angular正在清理结果并转义&符号...
Hope this helps someone! 希望这对某人有帮助!
You can make a filter using toLocaleString
like : 您可以使用
toLocaleString
进行过滤,例如:
Number(data).toLocaleString('en', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0})
Filter example : 过滤器示例:
.filter('EuroCurrency', function() {
return function(data) {
if (null != data) {
return Number(data).toLocaleString('en', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0});
} else {
return Number(0).toLocaleString('en', { style: 'currency',currency: 'EUR', maximumFractionDigits: 0});
}
};
});
Usage : 用法:
{{ rent | EuroCurrency }}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.