如何使用Javascript和Angular显示货币符号

How to display currency symbol using Javascript and Angular

本文关键字：显示 货币 符号 Angular 何使用 Javascript      更新时间：2024-03-05

我正在学习Angular，在显示货币符号时遇到问题。

我从一个api调用我的数据，该api返回一个格式化的条目，如下所示：

"currency_formatted": "£20 Million"

在角度中，当我填充格式化字段：｛｛currency_formated｝｝时，它输出：

 £20 Million

我所期望的是：2000万英镑

我可以在api中返回货币符号，所以：GBP，有没有一种方法可以使用它来获得正确格式的货币，而不是传递十六进制？

任何想法都将不胜感激！

十六进制是一个HTML编码的值。您可以使用ng-bind-html指令进行HTML解码，例如：

<span ng-bind-html="amount"></span>

需要对其进行净化以防止漏洞利用。为此，您需要添加对'ngSanitize'的依赖项，或者使用$sce将其作为HTML:信任

$scope.amount = $sce.trustAsHtml("&#xa3;20 Million");

===

然而，如果您可以将您的金额结构为名义价值和货币符号：

$scope.amount = {value: 20000000, symbol: '£'};

那么你可以使用currency过滤器来显示金额：

<span>{{amount.value | currency: amount.symbol:0}}</span>

这将显示"£20,000,000"，而不是"£20 Million"（因此，可能不是您需要的）

AngularJS

利用filter指令，您可以在HTML中包含以下内容：

<div>
   <span>{{ amount | currency : '£' }}</span>
</div>

我在一位朋友的帮助下，通过上面New Dev的回答，发现了这一点。这就是我所做的：

在我的HTML:中

<span ng-bind-html="currency_formatted | safeHtml"></span>

然后在我的应用程序中，我写了一个自定义过滤器：

//Filter to use html from the api
app.filter('safeHtml', function($sce) {
    return function(unsafeHtml) {
        console.log(unsafeHtml);
        return $sce.trustAsHtml(unsafeHtml);
    }
})

现在，这将返回要插入到页面中的html。

之前发生的事情是Angular对结果进行了消毒，并逃离了&签名…

希望这能帮助到别人！

您可以使用toLocaleString制作一个过滤器，如：

数字（数据）.toLocaleString（'en'，｛style:'currency'，currency:'EUR'，maximumFractionDigits:0｝）

过滤器示例：

.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});
        }
    };
});

用法：

{{ rent | EuroCurrency }}
相关文章：