Question

我正在使用AngularJS货币过滤器，并且无法正确显示欧元符号。

HTML：

{{ price.priceTotal | currency: myController.getPriceCurrency() }}

控制器：

getPriceCurrency() {
    return `&#8364; `;
}

注意 - 在上面的方法中，我只是返回欧元符号的代码，但此方法返回的货币可以是任意货币，具体取决于所选的货币

我遇到的问题是货币符号无法正常显示。例如，它显示为€ 50，但我希望它显示为€50.我试图将getPriceCurrency方法中的返回值直接设置为欧元符号€，但最终会显示为??? （三个问号）一旦部署代码。

我能做些其他的解决方法来让欧元和其他货币符号正确显示吗？

由于

Answer 1

您可以使用$sce ngSanitize模块执行此操作。这是为了确保可以信任html并防止任何易受攻击的XSS攻击。 Angular不会将字符串€直接转换为欧元符号。

＆＃13;

var app = angular.module("app", ["ngSanitize"]);
 app.controller("myCtrl", function($scope, $filter,$sce) {
   var vm =this;
   vm.price=100;
   vm.getPriceCurrency=function() {
     return `&#8364; `; // return any currency
}
 });
 app.filter('unsafe', function($sce) {
    return $sce.trustAsHtml;
});

＆＃13;

<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.5/angular-sanitize.js"></script>
</head>
<body ng-controller="myCtrl as myController">
<!-- binding the currency to html -->
    <div ng-bind-html="myController.price | currency: myController.getPriceCurrency()| unsafe">
    </div>
</body>
</html>

＆＃13;

Answer 2

Try this（有关更多信息，请参阅官方文档）：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="currencyExample">
  <script>
  angular.module('currencyExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.amount = 1234.56;
    }]);
</script>
<div ng-controller="ExampleController">
  <input type="number" ng-model="amount" aria-label="amount"> <br>
  default currency symbol ($): <span id="currency-default">{{amount | currency}}</span><br>
  custom currency identifier (USD$): <span id="currency-custom">{{amount | currency:"USD$"}}</span><br>
  no fractions (0): <span id="currency-no-fractions">{{amount | currency:"&euro;":0}}</span>
</div>
</body>
</html>

＆＃13;

Answer 3

使用此

  {{ price.priceTotal | currency: myController.getPriceCurrency() | currency:"&euro;"}}
    or
{{ price.priceTotal | currency: myController.getPriceCurrency() |  currency : "€"}}

在控制器中只返回值

    getPriceCurrency() {
        return `8364; `;
    }

Answer 4

我设法通过使用ng-bind-html来解决它：

ng-bind-html="myController.price | currency: myController.getPriceCurrency()"

这将我的货币视为HTML并正确显示。

AngularJS货币过滤器 - 欧元

4 个答案: