AngularJS

Question

我正在学习Angular并且无法显示货币符号。

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

"currency_formatted": "&#xa3;20 Million"

当我填充格式化字段时出现角度：{{currency_formatted}}它输出：

 &#xa3;20 Million

我期待的是： 2000万英镑

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

任何想法都将不胜感激！

Answer 1

十六进制是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"（因此，可能不是您需要的）

Answer 2

AngularJS

您可以在HTML中使用过滤器指令：

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

Answer 3

我在朋友的帮助和上面的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正在对结果进行消毒并逃避＆amp;签...

希望这有助于某人！

Answer 4

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

Number(data).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 }}

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

4 个答案:

AngularJS