Use the wj-input-number directive to add InputNumber controls to your
AngularJS applications.
Note that directive and parameter names must be formatted as lower-case with dashes
instead of camel-case. For example:
<p>Here is an InputNumber control:</p>
<wj-input-number
value="theNumber"
min="0"
max="10"
format="n0"
placeholder="number between zero and ten">
</wj-input-number>
The example below creates several InputNumber controls and shows the effect
of using different formats, ranges, and step values.
The wj-input-number directive supports the following attributes:
ng-model
@ Binds the control's value property using the ng-model Angular
directive. Binding the property using the ng-model directive provides standard benefits
like validation, adding the control's state to the form instance, and so on. To redefine
properties on a control that is bound by the ng-model directive, use the wj-model-property
attribute.
wj-model-property
@ Specifies a control property that is bound to a scope using the ng-model directive.
control
= A reference to the InputNumber control created by this directive.
format
@ The format used to display the number (see Globalize).
input-type
@ The "type" attribute of the HTML input element hosted by the control.
initialized
& This event occurs after the binding has finished initializing the control with attribute values.
is-initialized
= A value indicating whether the binding has finished initializing the control with attribute values.
max
@ The largest valid number.
min
@ The smallest valid number.
place-holder
@ The string to show as a hint when the control is empty.
is-required
@ A value indicating whether to prevent null values.
show-spinner
@ A value indicating whether to display spinner buttons to change the value by step units.
step
@ The amount to add or subtract to the value when the user clicks the spinner buttons.
AngularJS directive for the InputNumber control.
Use the wj-input-number directive to add InputNumber controls to your AngularJS applications. Note that directive and parameter names must be formatted as lower-case with dashes instead of camel-case. For example:
The example below creates several InputNumber controls and shows the effect of using different formats, ranges, and step values.
Example
The wj-input-number directive supports the following attributes:
@Binds the control's value property using the ng-model Angular directive. Binding the property using the ng-model directive provides standard benefits like validation, adding the control's state to the form instance, and so on. To redefine properties on a control that is bound by the ng-model directive, use the wj-model-property attribute.@Specifies a control property that is bound to a scope using the ng-model directive.=A reference to the InputNumber control created by this directive.@The format used to display the number (see Globalize).@The "type" attribute of the HTML input element hosted by the control.&This event occurs after the binding has finished initializing the control with attribute values.=A value indicating whether the binding has finished initializing the control with attribute values.@The largest valid number.@The smallest valid number.@The string to show as a hint when the control is empty.@A value indicating whether to prevent null values.@A value indicating whether to display spinner buttons to change the value by step units.@The amount to add or subtract to the value when the user clicks the spinner buttons.=The text to show in the control.=The number being edited.&The InputNumber.gotFocus event handler.&The InputNumber.lostFocus event handler.&The InputNumber.textChanged event handler.&The InputNumber.valueChanged event handler.