All geek questions in one place

Currency Filter AngularJS - Euro

I use the AngularJS currency filter, and I am having trouble displaying the Euro sign correctly.

HTML:

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

Controller:

getPriceCurrency() {
    return `€ `;
}

Note . In the above method, I simply return the code for the Euro symbol, but the currency returned by this method can be any, depending on the chosen currency.

The problem is that the currency symbol is not displayed correctly. It is displayed as € 50, for example, but I want it to be displayed as 50 euros. I tried to set the return in the getPriceCurrency method to the euro € sign directly, however it will display like ??? (three question marks) after code deployment.

Are there any other workarounds that I can do to correctly display the symbols of the euro and other currencies?

thank

+4
4

$sce ngSanitize. , , 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 `€ `; // 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>
Hide result
+2

( . ):

<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>
Hide result
0

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


    getPriceCurrency() {
        return `8364; `;
    }
0

, ng-bind-html:

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

HTML .

0
source

Source: https://habr.com/ru/post/1684868/

More articles:


All Articles