Search code examples
angularjsangular-filters

AngularJS - load HTML entity as currency symbol from scope

I have an application that deals with different currencies. I get currency symbol from a web service and store that symbol in the controller's $scope.

$scope.symbol = '€';

When I try to show that in html,

This is working:

{{ 1500 | currency:"€" }}

This is not working

{{ 1500 | currency:symbol }}

here's a plunker. Any ideas?

Solution

  • If you want to bind html or markup you need to use "ng-bind-html" and mark the content as trusted on your controller. I'm unaware of any way of how to do this with the mustache binding mechanism. But this is the approach we've been using when needing to bind markup.

    1. Make the code trusted in the controller
    2. Wrap the filter in a custom filter - Limitation is that you'll still need ng-bind-html

    Below are 3 options available to you:

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

    Markup

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

    Working sample 

    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>