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:

$3

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:

$3

npm install angular-dynamic-number

$3

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

$3

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:

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:

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 number has thousand separator.

num-thousand-sep:

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

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.
€ = €

num-append

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

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 file

To 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:

Filter options

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

numFrac

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

numSep

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

numRound

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

numFixed

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 )

numThousand

If true then number has thousand separator.

numThousandSep

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

numPrepend

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.
€ = €

numAppend

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}}

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

Negative or positive number with max value 9999.99 and comma as separator and thousand separator space

Filter for number with max 3 fraction number and comma separator

License

MIT