Angular 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.