JarCastingAngular Currency Filter
Extend angular's built in currency filter.
Description
Formats a number as a currency (ie $1,234.56 or 914.3534€). When no currency symbol is provided, default symbol for current locale is used.
Usage
Overwrites angular's default currency filter if module: currencyFilter is injected. (complete example in the Example section)
In HTML Template Binding
{{ currency_expression | currency:symbol[:fractionSize[:suffixSymbol[:customFormat]]] }}
In JavaScript
$filter('currency')(amount, symbol[, fractionSize[, suffixSymbol[, customFormat]]])
Paramaters
| Param | Type | Details |
|---|---|---|
| amount | number | Input to filter. |
| symbol | string | Currency symbol or identifier to be displayed. Falls back to ng.$locale. |
| fractionSize | number | Number of decimal places to round the number to. Falls back to ng.$locale |
| suffixSymbol | boolean or string | If set to true the currency symbol will be placed after the amount. If passed as a string, will apply currencySymbol as a prefix and suffixSymbol as a suffix |
| customFormat | object | Customize group and decimal separators (GROUP_SEP, DECIMAL_SEP) Both falls back to ng.$locale. |
Returns
String: Formatted number.
Use cases
var formats = {
GROUP_SEP: ' ',
DECIMAL_SEP: ','
};
// With all parameters
expect(currency(1234.4239, '€', 1, true, formats)).toEqual('1 234,4€');
// With all parameters, using string suffix
expect(currency(1234.4239, '€', 1, 'EUR', formats)).toEqual('€1 234,4EUR');
// With missing fraction size
expect(currency(1234.4239, '€', true)).toEqual('1,234.42€');
// With missing fraction size, using string suffix
expect(currency(1234.4239, '€', 'EUR')).toEqual('€1,234.42EUR');
// With fraction size only
expect(currency(1234.4239, '$', 3)).toEqual('$1,234.424');
// Only with symbol
expect(currency(1234.4239, '$')).toEqual('$1,234.42');
// Only with custom group and decimal separators
expect(currency(1234.4239, formats)).toEqual('$1 234,42');
Example
HTML Template Binding
<span ng-bind="price | currency:'€':true"></span> <!-- 1234.42€ -->
<span ng-bind="price | currency:'$':' USD'"></span> <!-- $1234.42 USD -->
JavaScript
angular.module('app', ['currencyFilter']).
controller('Ctrl', function ( $scope, $filter ) {
var currency = $filter('currency');
$scope.price = currency(1234.4239, '€', 0, true); // 1234€
$scope.price = currency(1234.4239, '$', 0, ' USD'); // $1234 USD
});
Install
Via bower
bower install --save angular-currency-filter
Include src/currency-filter.js or dist/currency-filter.min.js to your project.
<script src="/bower_components/angular-currency-filter/dist/currency-filter.min.js"></script>
Don't forget to add currencyFilter module to your app's dependecies.
Test && Build
$ npm install
$ bower install
Test
$ grunt test
Build
$ grunt build
Compatibility
Functionality verified with unit test with angular versions from v1.2.1 to v1.4.9.