Question

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

$scope.symbol = '&euro;';

当我尝试在html中显示时，

这是有效的：

{{ 1500 | currency:"&euro;" }}

这不起作用

{{ 1500 | currency:symbol }}

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

Answer 1

如果要绑定html或标记，则需要使用＆＃34; ng-bind-html＆＃34;并在控制器上将内容标记为受信任。我不知道如何用胡子绑定机制做到这一点。但这是我们在需要绑定标记时使用的方法。

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

以下是3种可供您选择的选项：

<强>控制器

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

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

.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>

工作样本

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 2

除了Rohan的回答之外，其中ng-bind-html是解决方案，你也可以使用isoCurrency模块。

如果你有ISO 4217货币代码（3个字符长度，例如美元，欧元等），isoCurrency可以输出正确的格式，分数大小和符号

// in controller $scope.amount = 50.50; $scope.currency = 'USD'; // in template {{ amount | isoCurrency:currency }} // $50.50

isoCurrency

Demo

Answer 3

在你的控制器中试试这个：

$scope.symbol = '€';

Plunker

Answer 4

如果使用JQuery（否则做同样的事情，但在纯javascript中，它将需要更多的代码但是可能，基本上创建一个html dom元素并将你的输入作为innerHTML插入到它，然后读取它的innerText）

function unescapeHTML(html) {
  return $("<div />").html(html).text();
}

然后当然

$scope.price=unescapeHTML('&euro;');

Answer 5

要在角度js中显示货币符号，您需要为下面的货币符号提供HTML实体，这是通过代码和模板中的示例和用法：

在Euro的模板示例中：

Item Price<span style="font-weight:bold;">{{price | currency:"&euro;"}}</span>

卢比的例子：

Item Price<span style="font-weight:bold;">{{price | currency:"&#8377;"}}</span>

另请查看以下网址

http://www.cs.tut.fi/~jkorpela/html/euro.html

来自控制器：

在控制器中注入$ filter

$scope.price=$filter('currency')($scope.price,'&euro;')

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

5 个答案: