AngularJS - load HTML object as currency symbol from scope
I have an application that handles different currencies. I am getting a currency symbol from a web service and storing that symbol in the $ control scope.
$scope.symbol = '€';
When I try to show that in html
It works:
{{ 1500 | currency:"€" }}
This does not work
{{ 1500 | currency:symbol }}
here is the plunker. Any ideas?
source to share
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 don't know how to do this with the mustache binding mechanism. But this is the approach we took when we needed to bind the markup.
- Make the code reliable in the controller
- Wrap the filter in a custom filter. The limitation is that you still need ng-bind-html
Below are 3 options:
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 example
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>
source to share
to complement Rohan's answer where ng-bind-html was the solution, you can also use the isoCurrency module.
if you have ISO 4217 currency code (3 characters long like USD, EUR, etc.) isoCurrency can output correct format , fraction size and...
// in controller
$scope.amount = 50.50;
$scope.currency = 'USD';
// in template
{{ amount | isoCurrency:currency }} // $50.50
source to share
If you are using JQuery (otherwise do the same, but in pure javascript, it will take a lot more code, but maybe basically create an html dom element and insert your innerHTML input into it, then read its innerText)
function unescapeHTML(html) {
return $("<div />").html(html).text();
}
And then of course
$scope.price=unescapeHTML('€');
source to share
To display currency symbol in angular js you need to provide HTML object for currency symbols below, examples and usage via code and template:
Inside your example Euro template:
Item Price<span style="font-weight:bold;">{{price | currency:"€"}}</span>
Rupee example:
Item Price<span style="font-weight:bold;">{{price | currency:"₹"}}</span>
Also check below url
http://www.cs.tut.fi/~jkorpela/html/euro.html
From the controller:
Embed $ filter in your controller
$scope.price=$filter('currency')($scope.price,'€')
source to share