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

Question

When i use \'currency\' in angular js, I am getting a dollar symbol. How to get required currency symbols based on the requirements. As if now i need to know how to display

Answer 1

According to Angular JS docs Link the currency can be changed

Item Price<span style="font-weight:bold;">{{price | currency:[symbol]}}</span>
Item Price in Dollar<span style="font-weight:bold;">{{price | currency:"USD$"}}</span>
Item Price in Euro<span style="font-weight:bold;">{{price | currency:"&euro;"}}</span>

And for INR it will be character code Link2

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

"₹" is the character code of :"₹"

Answer 2

I'm late to the party but worked on this filter for my last project.

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

• isoCurrency
• Demo

Answer 3

if you want to make it dynamic, here is my solution:

HTML

<div>{{ 100 | currencySymbol: 'USD' }}</div>

Filter

angular.filter('currencySymbol', function ($filter) {
    return function(amount, currency) {
        return $filter('currency')(amount, currency_symbols[currency]);
    }
});

Javascript currency array

var currency_symbols = {
    'USD': '$', // US Dollar
    'EUR': '€', // Euro
    'GBP': '£', // British Pound Sterling
    'ILS': '₪', // Israeli New Sheqel
    'INR': '₹', // Indian Rupee
    'JPY': '¥', // Japanese Yen
    'KRW': '₩', // South Korean Won
    'NGN': '₦', // Nigerian Naira
    'PHP': '₱', // Philippine Peso
    'PLN': 'zł', // Polish Zloty
    'PYG': '₲', // Paraguayan Guarani
    'THB': '฿', // Thai Baht
    'UAH': '₴', // Ukrainian Hryvnia
    'VND': '₫', // Vietnamese Dong
};

Answer 4

Simple solution giving for the INR currency.

If you want to display symbol

Item Price<span style="font-weight:bold;">{{item.price | currency:'INR'}}</span>

or

Item Price<span style="font-weight:bold;">{{item.price | currency:'INR':'symbol'}}</span>

or

Item Price<span style="font-weight:bold;">{{item.price | currency:'INR':'symbol-narrow'}}</span>

Result will look like: ₹140.00

Or If you want to display code instead of symbol then use following

 Item Price<span style="font-weight:bold;">{{item.price | currency:'INR':'code'}}</span>

Result will look like : INR140.00

Similarly you can check for the code of the other countries and replace that instead of INR(India Code)

Answer 5

<h2>{{8.99 | currency:'INR':true}}</h2>

Answer 6

$ is the default symbol for angular currency filter. To get the result in other symbol, for example Rupee (₹), you must explicitly define it in your app. For displaying ₹ symbol you just have to add an option in currency.

Example:

<span> <b>{{i.price | currency : '&#8377;' }}</b> </span>

₹ is the HTML code for ₹ symbol.