A number-only input element directive for AngularJS.
- Include
dist/number-input.min.js - Use the
<number-input></number-input>tag
<number-input ng-model="model"
max="24"
min="0"
step="1"
start="10"
hint="0 to 24 hours"
hideHint="false"
disableDecimal="true"
decimalPlaces="0"
prefix="*"
postfix="%"></number-input>or
opts = {
max: 24,
min: 0,
step: 1,
start: 10,
hint: "0 to 24 hours",
hideHint: false,
disableDecimal: true,
decimalPlaces: 0,
prefix: "*",
postfix: "%"
};<number-input ng-model="model" options="opts"></number-input>| Field | Data type | Default | Required | Attribute/Option | Description |
|---|---|---|---|---|---|
| ngModel | Number | None | Yes | Attribute | AngularJS model |
| start | Number | 0 | No | Both | Initial input value |
| min | Number | -∞ | No | Both | Minimum input value |
| max | Number | ∞ | No | Both | Maximum input value |
| step | Number | 1 | No | Both | How much to increase/decrease by when the +/- buttons are pressed |
| hint | String | Depends on min/max values | No | Both | Small text that appears below the input element |
| hideHint | Boolean | false | No | Both | Hides the hint |
| disableDecimal | Boolean | false | No | Both | Disables decimals from being typed |
| decimalPlaces | Number | # of decimals in step | No | Both | Number of decimal places shown |
| prefix | String | None | No | Both | An input prefix (i.e. $) |
| postfix | String | None | No | Both | An input postfix (i.e. %) |
| options | Object | Empty | No | Both | Options can be used instead of element attributes (attributes have priority) |
To test locally without using the minified version, have npm installed and use the following commands:
npm install http-server -g
http-server Workplace/angular.number-input/
Feel free to send a pull request if you can improve something, or create an issue if you have any questions or problems.
Licensed under GNU GPL v2.
Enjoy!