Angularjs bind HTML currency codes

Question

I want to filter and display HTML currency codes.

So my function gets the code name and returns the HTML code that match:

            vm.filterCurrencyCode = function(currncey){
                console.log(currncey);
                if( currncey ===  ''|| angular.isUndefined(currncey)){
                    return '&#8362'; // default
                }
                else if(currncey == 'USD' || currncey == 'CAD'){
                    return '&#036;'; //usd
                }
                else if(currncey == 'GBP' || currncey == 'GBp'){
                    return '&#163;'; //gbp
                }else{
                    return currncey; //return name
                }
            }

And in my HTML:

<td data-toggle="collapse" href="#collapse{{$index}}">{{vm.filterCurrencyCode(nia.CurrencyCode)}}</td>

But instead of the matching HTML symbol, the page display's the string - '&#8362'.

Maybe something you need https://stackoverflow.com/questions/1696619/displaying-unicode-symbols-in-html — Tan Duong, Apr 15 '18 at 07:17

PSK · Accepted Answer · 2018-04-15T07:24:17.393

3

You are trying to bind HTML to your view, which is by default not allowed. To achieve this you need sanitize your input using sanitize.js. Make sure you include sanitize.js in your project.

Once done, you need in include ngSanitize module in your app like following code

angular.module('myApp', ['ngSanitize']);

And insted of using {{}} you need to use ng-bind-html to bind the scope object to your view.

Your HTML code should look like following example

<td data-toggle="collapse" href="#collapse{{$index}}" 
    ng-bind-html="vm.filterCurrencyCode(nia.CurrencyCode)"></td>

You can get more details on this here and here

edited Apr 15 '18 at 07:24

answered Apr 15 '18 at 07:18

PSK

17,547
5
32
43

Testing and posting the result. – Itsik Mauyhas Apr 15 '18 at 07:32
@PSK Your approach is correct, but in my opinion, using currency filter is more better bcoz this way, he is future proof. Any new currency code comes in, it will work directly. With above approach, he needs to keep adding conditions in his controller for more returning proper code. – ashfaq.p Apr 15 '18 at 07:36

score 1 · Answer 2 · answered Apr 15 '18 at 07:18

1

You can use the currency filter to do this.

Read about it here: Currency filter

Refer the SO answer: How to get specific currency symbol(rupee symbol in my case) in angular js instead of the default one (dollar $ symbol)

answered Apr 15 '18 at 07:18

ashfaq.p

5,379
21
35

1

Testing and posting the result. – Itsik Mauyhas Apr 15 '18 at 07:32
You should use this approach to be future proof – ashfaq.p Apr 15 '18 at 08:37

Angularjs bind HTML currency codes

2 Answers2