luid-percentage

An input that display and edit a percentage in a user friendly manner but has a model value more easily usable by the js code and support different formats.

It is editable using a regex as pattern recognition to know if the inputed text is parsable into some kind of float. If the pattern is invalid the binded value will be set to undefined. This allows the luid-percentage to be compatible with required and ng-required.

Upon pressing enter or losing focus of the input, it will format the input into a more readable form. For example you enter 10.00 and press enter, the text will change to 10

Supports up and down key events and scroll event to increment/decrement the value.

Supports 3 formats :

• 0.XX default format. 10% in the input will be translated to 0.1 in the scope
• XX 10% in the input will be translated to 10 in the scope
• 1.XX 10% in the input will be translated to 1.1 in the scope, use this format if you want to directly use the value as multiplicative coefficient

• ng-model : the variable to bind to
• ng-change : events to launch when the value is updated
• ng-disabled : enable or disable the input
• format : "0.XX", "XX" or "1.XX". The default is "0.XX", see above
• step : when scrolling or pressing the up/down key, how many percents you want to be added. The default is 5
• placeholder : placeholder to display when the input is empty

<luid-percentage ng-model="myValue"></luid-percentage>
<luid-percentage ng-model="myValue" format="XX" step=25></luid-percentage>