https://github.com/sagiegurari/angular-number-input
AngularJS number input directive.
https://github.com/sagiegurari/angular-number-input
angular angularjs-number bower html number-input web
Last synced: 10 months ago
JSON representation
AngularJS number input directive.
- Host: GitHub
- URL: https://github.com/sagiegurari/angular-number-input
- Owner: sagiegurari
- License: apache-2.0
- Created: 2016-05-08T08:54:32.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2023-01-19T16:47:37.000Z (about 3 years ago)
- Last Synced: 2025-06-12T08:53:10.714Z (10 months ago)
- Topics: angular, angularjs-number, bower, html, number-input, web
- Language: JavaScript
- Size: 141 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# angular-number-input
[](https://www.npmjs.org/package/angular-number-input) [](https://github.com/sagiegurari/angular-number-input/actions) [](https://coveralls.io/r/sagiegurari/angular-number-input) [](https://snyk.io/test/github/sagiegurari/angular-number-input) [](http://inch-ci.org/github/sagiegurari/angular-number-input) [](https://github.com/sagiegurari/angular-number-input/blob/master/LICENSE)
> AngularJS number input directive
* [Overview](#overview)
* [Demo](https://sagiegurari.github.io/angular-number-input/)
* [Usage](#usage)
* [Installation](#installation)
* [API Documentation](docs/api.md)
* [Contributing](.github/CONTRIBUTING.md)
* [Release History](#history)
* [License](#license)
## Overview
The number-input is an angular directive which provides number validation, parsing and formatting capabilities
on any HTML element.
## Demo
[Live Demo](https://sagiegurari.github.io/angular-number-input/)
## Usage
In order to use the number-input directive you first must add the relevant dependencies:
```html
```
Next you must define it as a dependency in your main angular module as follows:
```js
angular.module('exampleApp', [
'number-input'
]);
```
Now you can use the directive in your HTML templates, for example:
```html
```
In case you have common parsing/formatting/validations/min/max/step you wish to use in many places in your application, you can create a service to implement those and provide it to the directive as follows:
```html
```
And an example service:
```js
angular.module('moneyModule', []).service('myMoneyService', function () {
return {
create: function () {
return {
config: null, //will be populated by the directive with the config which holds the min/max/step/... values
min: 10,
max: 100,
step: 5,
format: function (value) {
if (value) {
value = '$' + value;
}
return value;
},
parse: function (value) {
if (value) {
if (value.charAt(0) === '$') {
value = value.substring(1);
}
}
value = Number(value);
return value;
},
validate: function (modelValue, viewValue) {
return true;
},
link: function (scope, element, attrs, ngModelCtrl) {
//do some custom stuff on the directive instance like adding DOM event handling
element.on('keydown', function ($event) {
switch ($event.keyCode) {
case $.ui.keyCode.ENTER:
element.blur();
break;
}
});
}
};
}
}
});
```
In case both service and HTML attributes provide a definition for same attributes (for example min, max, parser and so on...), the HTML attribute value will override the service provided value.
If the HTML provided value changes to undefined/null/invalid value, the service value will be used instead.
## Installation
Run npm install in your project as follows:
```sh
npm install --save angular-number-input
```
## API Documentation
See full docs at: [API Docs](docs/api.md)
## Contributing
See [contributing guide](.github/CONTRIBUTING.md)
| Date | Version | Description |
| ----------- | ------- | ----------- |
| 2020-05-11 | v2.0.0 | Migrate to github actions, upgrade minimal node version and remove bower |
| 2019-02-08 | v1.1.7 | Maintenance |
| 2018-02-12 | v1.1.2 | Add support for step validations using big.js for more accurate calculations |
| 2018-02-01 | v1.0.38 | Link function of the provided service will only be called once to prevent memory leaks |
| 2016-07-11 | v0.0.27 | Service can now provide min/max/step values and template values override service values |
| 2016-06-14 | v0.0.22 | Published via NPM (in addition to bower) |
| 2016-05-17 | v0.0.14 | Directive element now listens to new number-input$update-model event |
| 2016-05-15 | v0.0.11 | Redesign of service integration |
| 2016-05-09 | v0.0.5 | 'service' is now string value and not binded to scope |
| 2016-05-09 | v0.0.3 | Adding common service support |
| 2016-05-08 | v0.0.3 | Initial release |
## License
Developed by Sagie Gur-Ari and licensed under the Apache 2 open source license.