3

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?

Rohan Büchner
  • 5,333
  • 4
  • 62
  • 106
Raghavendra
  • 5,281
  • 4
  • 36
  • 51

5 Answers5

6

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>
Rohan Büchner
  • 5,333
  • 4
  • 62
  • 106
1

to an addition to Rohan's answer, where ng-bind-html was the solution, you could also use isoCurrency module.

if you have the ISO 4217 currency code (3 chars length e.g. USD, EUR, etc) isoCurrency can output the right format, fraction size and symbol.

// in controller
$scope.amount = 50.50;
$scope.currency = 'USD';

// in template
{{ amount | isoCurrency:currency }} // $50.50
Simon Wicki
  • 4,029
  • 4
  • 22
  • 25
0

Try this in your controller:

$scope.symbol = '€';

Plunker

Amit Mittal
  • 1,129
  • 11
  • 30
  • I get `€` symbol from my web service, so any ideas with that? – Raghavendra Sep 15 '14 at 07:05
  • Is it not possible for your webservice to simply return the symbols directly instead of returning the html entities of that symbols? If your service fetches data from db, you can simply store '€' inside your db just like normal string data. If you donot have access to webservice or db, this post might help you: http://stackoverflow.com/questions/21919533/using-html-entities-within-angular-strings – Amit Mittal Sep 15 '14 at 07:23
0

If using JQuery (Otherwise do the same thing but in pure javascript, it will take much more code but is possible, basically create a html dom element and insert your input as innerHTML to it, then read it's innerText)

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

And then of course

$scope.price=unescapeHTML('&euro;');
Rickard Staaf
  • 2,650
  • 2
  • 14
  • 14
-1

To display currency symbol in angular js you need provide HTML entity for currency symbols below are the examples and usage in through code and in template :

Inside your Template example of Euro:

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

example of Rupee:

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

Also check below url

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

From controller :

Inject $filter in your controller

$scope.price=$filter('currency')($scope.price,'&euro;')
Vikas Garg
  • 190
  • 1
  • 7
  • @Raghav try above solution. In my office plunker URl is restricted, kindly check and comment as final solution. – Vikas Garg Sep 15 '14 at 06:49