angularjs-currency-input-mask

Module for AngularJS 1.3+ providing a input mask and filter for working with variable currency configurations. It allows the user to type only digits while formatting the currency in the pattern passed as a parameter to the directive.

Installation

``` npm install --save angularjs-currency-input-mask ```

Configuration

Import the minified script from ``dist/angularjs-currency-input-mask.min.js`` to your page ```html ``` Add the module ``cur.$mask`` as dependency of your main application module ```js angular.module('myapp', 'cur.$mask') ```

Usage

• Basic usage example

```html ``` Adding the ``mask-currency` directive to an input with `ng-model` associated will load settings from `$locale`` provider. It means that, if no configuration is provided, values will be masked in the same format of the currency filter.

• Setting up custom pattern

```html ``` Adding up custom settings will change the mask applied. The example above sets the format to brazilian reais currency.

• Making it dynamic

```html ``` Making use of the controller scope enables dynamic settings for the mask, not locking on a single locale. As shown on the demo file, a list of currencies with its given configurations is created to provide different filling options to the input, and then is attached to the scope: ```js var currencies =

{symbol:'\u20AC'},

{symbol:'\u00A3',config:{indentation:' '}},

{symbol:'\u00A5', config:{decimalSize:0}},

{symbol:'R\u0024',config:{group:'.',decimal:',',indentation:' '}}

angular.module('demo','cur.$mask')

.controller('ctrl', function($scope,$locale) {

$scope.currencies = currencies;

$scope.currency = currencies[0];

})

```

Be aware that modifying the floating point of the input will result in a different number.

If the number 123456 is typed on the input it will be shown as something like $1,234.56 depending on the config parameter,

but if decimalSize is changed to zero within the config parameter the number shown will be something like $123,456 != $1,234.56

Filter

To format an output that matches the input mask pattern, the filter printCurrency is available ``` {{value | printCurrency : currency.symbol : currency.config}} ```

Options

The options available to the config parameter object are:

• indentation: defines character(s) separation between currency sign and value

• orientation: 'l' to show symbol at the left 'r' to show on the right

• decimal: the character separator to the fraction

• group: the character separator to the groups of numbers

• decimalSize: number of digits after the decimal point

• groupSize: number of digits within a group of numbers

Demo

A Demo page containing different usage scenarios is located in demo/index.html

Build

If you are cloning the repository you must have gulp globally installed and run the following commands in order to have the dist folder generated: ``` npm install npm run build ```

Testing

Tests are coded using Karma + Jasmine. The easiest way to run these checks is the following ``` npm install npm test ```