cohenadair / angular.number-input

A number-only input element directive for AngularJS.

Number Input for AngularJS

DEMO

A number-only input element directive for AngularJS.

Status

September 27th, 2017: Support for this project has been discontinued. Use at your own risk.

Requirements

• Bootstrap
• AngularJS

Installation

1. Include dist/number-input.min.js
2. Use the <number-input></number-input> tag

Example

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

Options

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)

Testing Locally

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/

Contributing

Feel free to send a pull request if you can improve something, or create an issue if you have any questions or problems.

License

Licensed under GNU GPL v2.

Enjoy!

angular.number-input's Issues

Compress source files

Compress source files into distribution files:

• number-input.js
• number-input.min.js
• Compress HTML for file compression

Support for ng-change

I need support for the ng-change attribute. Right now I'm using $scope.$watch to process changes in the ng-model value, but it doesn't seem like the right thing to do. Am I doing something wrong?

Need an "options" object

Users should have the option to use an "objects" object rather than being forced to use attributes.

Prefix and postfix attributes

I'd like to see prefix and postfix attributes added. Would allow for formatting like: "$12", "60%" or "12 hrs"

Add "allowAllCharacters" option

This will allow users to type in any character rather than being restricted to number related characters.

Why?

• To keep form consistency with other components

Additions

• A default UI validation in the form of a red border in the input box
• Attribute for providing a custom validation function; likely pass in or return validation error message

Add unit tests

Read about and implement Angular unit tests.

Not updating ngModel

ngModel value stays the same as initial value, is not updated

Issue with min and max

When min is greater then zero value is always set to max

Example:
min = 6, max = 19
If you try to input number 11 it will set it to 6 and then to 19. It triggers on-change for 1st digit and sets the value to 6 since 1<6 and then 2nd digit is 1 which which produces 61>19.

issue in setting the initial value for the input

i am using ng-repeat in my checkout page but couldn't set the initial value to the number-input directive.
i have tried passing my json object in "start" attribute something like below but its throwing error

Can any one help me how to set the initial value.

Demo page

Demo page needs to be created. Should demo:

• default
• without label
• different steps
• different decimal places
• different ranges

Other stuff to include:

• "Download number-input.min.js" link
• "View on GitHub" link
• "Find Cohen Adair" link (cohenadair.com)

Allow variable editing via input boxes.

Documentation

Documentation required for:

• usage instructions
• requirements (AngularJS, Bootstrap)

How to add a placeholder instead of initial number?

I would like to use a placeholder in input instead of number 0 by default.

How to insert decimal number

Hi cohenadair .
Your direct so cool. Bu how to input the decmial number when i keydown to input.
Exmp : When i focus input and keydown with 1.523 It's not working

$dirty flag initially set to true

Before user's actually interact with the form, Angular's $dirty flag is set to true. This is because number-input sets a default value and Angular assumes it was the user who made the change.

One solution, and probably the easiest would be to manually, in number-input, set the $dirty flag to false after the defaults have been set.