gpt4 book ai didi

AngularJS - 从范围加载 HTML 实体作为货币符号

转载 作者:行者123 更新时间:2023-12-01 10:46:04 25 4
gpt4 key购买 nike

我有一个处理不同货币的应用程序。我从 Web 服务获取货币符号并将该符号存储在 Controller 的 $scope 中。

$scope.symbol = '€';

当我尝试在 html 中显示时,

这是有效的:

{{ 1500 | currency:"€" }}

这是行不通的

{{ 1500 | currency:symbol }}

here's a plunker.有什么想法吗?

最佳答案

如果您想绑定(bind) html 或标记,您需要使用“ng-bind-html”并在您的 Controller 上将内容标记为受信任。我不知道如何使用 mustache 绑定(bind)机制执行此操作。但这是我们在需要绑定(bind)标记时一直使用的方法。

  1. 使代码在 Controller 中受信任
  2. 将过滤器包装在自定义过滤器中 - 限制是您仍然需要 ng-bind-html

以下是您可用的 3 个选项:

Controller

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope,$sce) {
$scope.nonTrustedSymbol = '€';
$scope.trustedSymbol = $sce.trustAsHtml('€');
})

.filter('currencyWithNumberFilter', ['$filter','$sce',
function ($filter, $sce) {
return function (input, curr) {
var formattedValue = $filter('number')(input, 2);
return $sce.trustAsHtml(curr + formattedValue);
}
}]
)

.filter('currencyWithCurrencyFilter', ['$filter','$sce',
function ($filter, $sce) {
return function (input, curr) {
var formattedValue = $filter('currency')(input,curr);
return $sce.trustAsHtml(formattedValue);
}
}]
);

标记

 <body ng-controller="MainCtrl">

"Vanilla" controller & number filter:
<span ng-bind-html=trustedSymbol></span>{{ 1500 | number:2 }}

<br/>

Custom filter, internally making use of Number filter for formatting:
<span ng-bind-html="1500 | currencyWithNumberFilter:nonTrustedSymbol"></span>

<br/>

Custom filter, internally making use of Currency filter for formatting:
<span ng-bind-html="1500 | currencyWithCurrencyFilter:nonTrustedSymbol"></span>

</body>

工作样本

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope,$sce) {

$scope.nonTrustedSymbol = '€';

$scope.trustedSymbol = $sce.trustAsHtml('€');

})


.filter('currencyWithNumberFilter', ['$filter','$sce',
function ($filter, $sce) {
return function (input, curr) {

var formattedValue = $filter('number')(input, 2);

return $sce.trustAsHtml(curr + formattedValue);
}
}]
)

.filter('currencyWithCurrencyFilter', ['$filter','$sce',
function ($filter, $sce) {
return function (input, curr) {

var formattedValue = $filter('currency')(input,curr);
return $sce.trustAsHtml(formattedValue);
}
}]
);
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">

"Vanilla" controller & number filter:
<span ng-bind-html=trustedSymbol></span>{{ 1500 | number:2 }}

<br/>

Custom filter, internally making use of Number filter for formatting:
<span ng-bind-html="1500 | currencyWithNumberFilter:nonTrustedSymbol"></span>

<br/>

Custom filter, internally making use of Currency filter for formatting:
<span ng-bind-html="1500 | currencyWithCurrencyFilter:nonTrustedSymbol"></span>

</body>

</html>

关于AngularJS - 从范围加载 HTML 实体作为货币符号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25842194/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com