Angular Dynamic Number

Highly customizable AngularJS directive for numbers. It validates inputs in realtime (if user press not acceptable character it wont appear in input field). This directive may be configured for each input (you can set number of digits in integer part and number of digits in decimal part, you can set decimal separator, accept only positive or negative values)

The Big advantage of this directive, is separation of view value and model value. You can set comma as decimal separator (default is dot) for numbers. And then in input field there will be comma as separator, but your model value will be correct float number with dot separator.

It works at realtime, therefore this model value may be use in computation for other elements and they will change real time too.

It works also when you set in controller your model value (with dot) and if you set separator as comma, then in input field there will be comma.

There is also filter for one directional binding (ngBind). It round fraction part to fixed number of digits. Round method can be select from Math.round, Math.ceil and Math.floor. It can show comma or dot as decimal separator.

Filters can reuse strategies.

It even allow to dynamically change directive properties. Just set them as models.

It is also React version available React Dynamic Number

## Change Log:

### v2.0.0:

model type is number instead of string.## Demo:

link## Features:

- config max numbers for integer part and decimal part.
- config decimal separator (dot or comma)
- config to accept positive, negative and both numbers.
- model value is correct javascript number, but view value may be correct number for localities
- dynamic thousand separator (by default if decimal separator is comma then thousand separator is dot)
- thousand separarator: space, dot or comma
- filter with comma/dot separator and congurable number of fraction digits
- filter with thousand separator
- keeps cursor position
- custom strategies for directive and filer
- allow add currency (single character)
- allow to dynamically change directive properties

## Limitations:

Directive is designed for input text/tel field (**type="text"**and

**type="tel"**). Tel field type triggers numeric keyboard on mobile devices. The input field must have ngModel.

## Installation:

### npm

`npm install angular-dynamic-number`

### bower:

`bower install angular-dynamic-number`

then reference:`bower_components/angular-dynamic-number/release/dynamic-number.js`

or`bower_components/angular-dynamic-number/release/dynamic-number.min.js`

### manualy

Clone repository ```https://github.com/uhlryk/angular-dynamic-number.git`

`` and use in your code `

``release/dynamic-number.js`

``## Quick start: How to use it

Add the js file to your html:`<script src="myPath/angular-dynamic-number/release/dynamic-number.min.js"></script>`

Or if you use browserify and install by npm:`require('angular-dynamic-number');`

Add the module to your dependencies:`angular.module('myApp', ['dynamicNumber', ...])`

Add the ```awnum`

`` attribute to input fields:`<input type='text' ng-model='somemodel' awnum />`

## Options

Options are also input field attributes**num-int**:

Set maximum numbers of digits integer part (digits before decimal separator) (default 6).

**num-fract**:

Set maximum numbers of digits fraction part (digits after decimal separator) (default 2).

**num-sep**:

Set decimal separator (dot or comma) (default '.').

**num-pos**:

If true then number can be positive (default 'true').

**num-neg**:

If true then number can be negative (default 'true').

**num-round**:

Define round method for fraction part when convert from model to view and for filter

**num-fixed**

If true then there is fixed number of fraction digets - (useful when fraction part is 00 and we need to show this zeros e.g. 12,00 )

num-thousand

If true then there is fixed number of fraction digets - (useful when fraction part is 00 and we need to show this zeros e.g. 12,00 )

**:**

If true then number has thousand separator.

num-thousand-sep

If true then number has thousand separator.

**:**

Set thousand separator (dot or comma or space or apostrophe) (enable if num-thousand = true, by default if num-sep equal dot then thousand separator is comma). If you want to set separator as space remember that angular by default trim spaces. You can as value set "{{' '}}"

num-prepend

Set thousand separator (dot or comma or space or apostrophe) (enable if num-thousand = true, by default if num-sep equal dot then thousand separator is comma). If you want to set separator as space remember that angular by default trim spaces. You can as value set "{{' '}}"

**num-append**

Allow to set single character prepend currency e.g. $1234.12. Html could have problem with show some characters. In those situations you should set currency as html entit. € =

Allow to set single character prepend currency e.g. $1234.12. Html could have problem with show some characters. In those situations you should set currency as html entit. € =

`€`

**numFrac**

Allow to set single character append currency e.g. 1234.12€. Html could have problem with show some characters. In those situations you should set currency as html entit. € =

In short separator, integer, fraction, thousand, append are models

To create custom strategy in config use ``

Allow to set single character append currency e.g. 1234.12€. Html could have problem with show some characters. In those situations you should set currency as html entit. € =

`€`

## Dynamic properties

Some of properties of directive can be a models. And change in models change properties in directive. For example you can change currency, decimal separator etc. Demo page has example of usage dynamic properties.In short separator, integer, fraction, thousand, append are models

```
<input type='text' class="form-control"
ng-model='value'
awnum
num-sep="{{separator}}"
num-int="{{integer}}"
num-fract="{{fraction}}"
num-thousand="{{thousand}}"
num-append="{{append}}"
>
```

Changes of some properties reset value in input (num-int, num-fract). Others properties after changes recreate value in input.## Custom strategies

There are multiple options for configuration each input. If you don't like write each time same options, there is for you custom strategies. You can in config file create multiple sets of configs, and use them in input fileTo create custom strategy in config use ``

`dynamicNumberStrategyProvider`

``. It has methods:```
addStrategy(strategyName, {
numInt: number,
numFract: number,
numSep: char [\.|,],
numPos: boolean [true|false],
numNeg: boolean [true|false],
numRound: string ['round' | 'ceil' | 'floor'],
numThousand: boolean [true|false]
})
```

for example, create price strategy:```
app.config(['dynamicNumberStrategyProvider', function(dynamicNumberStrategyProvider){
dynamicNumberStrategyProvider.addStrategy('price', {
numInt: 6,
numFract: 2,
numSep: '.',
numPos: true,
numNeg: true,
numRound: 'round',
numThousand: true
});
}]);
```

and use it in input:`<input type="text" ng-model="somemodel" awnum="price">`

## Filter options

`{{ expression | awnum:numFrac:numSep:numRound:numFixed:numThousand:numThousandSep:numPrepend:numAppend}}`

**numSep**

Set maximum numbers of digits fraction part (digits after decimal separator) (default 2).

Set maximum numbers of digits fraction part (digits after decimal separator) (default 2).

**numRound**

Set decimal separator (dot or comma) (default '.').

Set decimal separator (dot or comma) (default '.').

**numFixed**

Define round method for fraction part when convert from model to view and for filter

Define round method for fraction part when convert from model to view and for filter

**numThousand**

If true then there is fixed number of fraction digets - (useful when fraction part is 00 and we need to show this zeros e.g. 12,00 )

If true then there is fixed number of fraction digets - (useful when fraction part is 00 and we need to show this zeros e.g. 12,00 )

**numThousandSep**

If true then number has thousand separator.

If true then number has thousand separator.

**numPrepend**

Set thousand separator (dot or comma or space or apostrophe).

Set thousand separator (dot or comma or space or apostrophe).

**numAppend**

Allow to set single character prepend currency e.g. $1234.12. Html could have problem with show some characters. In those situations you should set currency as html entit. € =

Allow to set single character prepend currency e.g. $1234.12. Html could have problem with show some characters. In those situations you should set currency as html entit. € =

`€`

**strategy**

Allow to set single character append currency e.g. 1234.12€. Html could have problem with show some characters. In those situations you should set currency as html entit. € =

Allow to set single character append currency e.g. 1234.12€. Html could have problem with show some characters. In those situations you should set currency as html entit. € =

`€`

## Filter with strategies

`{{ expression | awnum:strategy}}`

This is name of strategy

This is name of strategy

## ngTrim and spaces

This is angular input directive parameter. By default it has value true, which means that it automatically trim spaces and Angular Dynamic Number don't get spaces. Therefore the best result is when you set for input ng-trim=false## Example:

Negative number with max value 9999.99 and comma as separator`<input type='text' ng-trim=false ng-model='value4' awnum num-sep=',' num-int=4 num-fract=2 num-pos=false>`

Negative or positive number with max value 9999.99 and comma as separator and thousand separator space```
<input type='text' ng-trim=false ng-model='value4' awnum num-sep=',' num-int=4 num-fract=2 num-pos=false num-thousand=true num-thousand-sep="{{' '}}">
```

Filter for number with max 3 fraction number and comma separator`<div>{{somemodel|awnum:3:',':'round'}}</div>`