Currency Formatting
Invision supports the formatting of currency values using the ISO 4217 specification via the browser's toLocaleString function. The filter has a single required parameter, the currency code, and also an optional parameter to specify the locale that governs the transformation. By default, the locale is currently hard coded to English, but once we expose the ability for the user to select their locale/language, we will update the default to represent the user's selection.
For this example, our controller specifies a cost variable on scope with a value of 125.25. Our first format will render that cost in the English locale, using USD as the currency.
Note: Invision UI does not support accessing Redux, but within Invision the second parameter of locale is optional. If you want to use the default locale (you probably will), you can omit passing 'en-us' to the filter.
Next, we'll remain in the default locale, but we'll specify a few different currency codes.
Let's take a look at using a different locale. For these examples, we'll use the same currencies from the initial example, but we'll override the locale to French.
Note that the filter automatically converts demial points to commas, and moves the currency code to the end of the currency.
- HTML
<div class="t-content" ng-controller="invCurrencyExampleController"> <p>For this example, our controller specifies a cost variable on scope with a value of 125.25. Our first format will render that cost in the English locale, using USD as the currency.</p> <p><strong>Note:</strong> Invision UI does not support accessing Redux, but within Invision the second parameter of locale is optional. If you want to use the default locale (you probably will), you can omit passing 'en-us' to the filter.</p> <div>Cost in USD: {{ cost | invCurrency:'USD':'en-us'}}</div> <p>Next, we'll remain in the default locale, but we'll specify a few different currency codes.</p> <div>Cost in EUR: {{ cost | invCurrency:'EUR':'en-us'}}</div> <div>Cost in CNY: {{ cost | invCurrency:'CNY':'en-us'}}</div> <p>Let's take a look at using a different locale. For these examples, we'll use the same currencies from the initial example, but we'll override the locale to French.</p> <div>Cost in USD: {{ cost | invCurrency:'USD':'fr-fr'}}</div> <div>Cost in EUR: {{ cost | invCurrency:'EUR':'fr-fr'}}</div> <div>Cost in CNY: {{ cost | invCurrency:'CNY':'fr-fr'}}</div> <p>Note that the filter automatically converts demial points to commas, and moves the currency code to the end of the currency.</p> <div>Cost in USD without rounding: {{ cost | invCurrency:'USD':'en-us':true}}</div> </div>