angular-step-input

Angular directive for a customized numeric user inputs

Getting Started

  1. Install with bower: bower install --save angular-step-input
  2. Include angular-step-input.js.
  3. Add tien.stepInput to you app modules.
  4. Use the tien-step-input directive.
If you don't like package managers, you can also directly download angular-step-input.js or angular-step-input.min.js.

Demos

1. Out-of-the-box

$scope.demo = {{demo}}

2. Custom icons and style

$scope.demo = {{demo}}

3. Specific step settings

$scope.demo = {{demo}}

4. View value as a function

$scope.demo = {{demo}}

5. View value as an expression

$scope.demo = {{demo}}

6. Availability example

$scope.available = {{available}}

Usage

Use the tien-step-input directive as element or attribute. Add the ng-model directive to bind an integer. Optionally pass through a custom options object width the step-input-options attribute. 

<tien-step-input ng-model="foo" step-input-options="my_options"></tien-input-step>
<script>
    $scope.options = {
        min_value: -1,
        overrides: [
            {value: -1, style: 'danger', view_value: '<i class="fa fa-times"></i>'},
            {value: 0, style: 'warning', view_value: '<i class="fa fa-question"></i>'}
        ]
    };
</script>

Options

decrease

Type: String
Default: fa fa-minus

CSS classes to add to the icon on the decrease button. By default FontAwesome icons are used.

increase

Type: String
Default: fa fa-plus

CSS classes to add to the icon on the increase button. By default FontAwesome icons are used.

min_value

Type: Integer
Default: 0

Minimum value of the field, negative integers allowed.

max_value

Type: Integer
Default: 999

Maximum value of the field, negative integers allowed.

style

Type: String
Default: primary

CSS classes applied to the container element of the directive. The default stylesheet provides all Bootstrap color classes (primary, success, info, warning, danger). The [sass-src file]() includes a mixin to easily add custom colors.

view_value

Type: Function | Expression | Boolean
Default: false

By default (false) the input displays the current integer-value in a regular input element. With the view_value option it is possible to alter this representation with a function (demo 4) or angular expression (demo 5) that returns an HTML-string.

overrides

Type: Array
Default: []

This Array overrides options based on specific input values. Each array element has to be an Object with at least the value-property. All options mentioned above are available. See demo 3 & 6.

angular-step-input 0.1.0 · Created by 10KB
Thanks to FontAwesome for providing awesome icons.

GitHub Project