AngularJS 货币过滤器 - 欧元

Question

我正在使用 AngularJS 货币过滤器，但在正确显示欧元符号时遇到问题。

HTML:

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

控制器：

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

注意 - 在上述方法中，我只是 return 欧元符号的代码，但货币return通过此方法输入的值可以是任意值，具体取决于所选的货币。

我遇到的问题是货币符号显示不正确。例如，它显示为 € 50，但我希望它显示为 € 50。我尝试将 getPriceCurrency 方法中的 return 直接设置为欧元符号 €，但最终会显示作为？？？（三个问号）一旦部署了代码。

我可以采取任何其他解决方法来正确显示欧元和其他货币符号吗？

谢谢

Answer 1

Try this（更多信息请参考官方文档）：

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

Answer 2

使用这个

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

在控制器中 return 值

    getPriceCurrency() {
        return `8364; `;
    }

Answer 3

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

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

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

Answer 4

我设法使用 ng-bind-html 解决了它：

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

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

AngularJS 货币过滤器 - 欧元

AngularJS Currency Filter - Euro

html

javascript

angularjs

angular-filters