anp

angular-number-picker

A directive used for picking number by using up/down button, instead of typing

Showing:

Popularity

Downloads/wk

92

GitHub Stars

24

Maintenance

Last Commit

5yrs ago

Contributors

3

Package

Dependencies

0

Size (min+gzip)

1.4KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

angular-number-picker

=====================

NPM version

A directive used for picking number by using -/+ button, instead of typing the number directly.

This is an angular directive designed in mobile-first concept. Which means you would have better user experience while in mobile development.

While running on mobile device, you would increase/decrease the number continuously by long tap the -/+ button.

Try it: plunker

Requirement

UI dependency(optional)

Installation

via bower

bower install angular-number-picker --save

via npm

npm install angular-number-picker --save

via script

<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/angular-number-picker/dist/angular-number-picker.min.js"></script>

Import

via ES2015

import {ngNumberPicker} from 'angular-number-picker';

via CommonJS

var ngNumberPicker = require('angular-number-picker').ngNumberPicker;

via script

<script type="text/javascript">
    var ngNumberPicker = window.ngNumberPicker;
</script>

Basic Usage

Add ngNumberPicker module as your angular app's dependency

var demo = angular.module('demo', [ngNumberPicker]);

ngNumberPicker is the variable you get from above "Import" stage

Use h-number tag in your html

<div ng-controller="DemoController">
    <h-number value="input.num" min="2" max="10" step="1" change="onChanged()"></h-number>
</div>

You can use transclusion, too

<div ng-controller="DemoController">
    <h-number value="input.num" min="2" max="10" step="1" change="onChanged()">
        <input type="text" ng-model="input.num">
    </h-number>
</div>

Writing DemoController

demo.controller('DemoController', ['$scope', function($scope) {
   $scope.input = {
            num: 0
        };

   $scope.getNumber = function() {
       alert('The number is: [' + $scope.input.num + ']');
   };

   $scope.onChange = function(){
       console.log('The number is Changed ', $scope.input.num);
   };
}]);

h-number configuration

AttributeTypeRequiredDescription
valueexpressionYesExpression to evaluate as the input number
minNumberNoThe minimal point to limit the operation. 0 by default
maxNumberNoThe maximum point to limit the operation. 100 by default
stepNumberNoThe step value for the operation. 1 by default
singularStringNoLabel to be included after value when value is 1
pluralStringNoLabel to be included after value when value is not 1
unit-positionStringNowhere to place the singular/plural. Available options: left, right. right by default.
changeFunctionNoFunction to be called while number is changed

build-in class

input-group

The wrapper class for the h-number element

input-group-addon

The wrapper class for +- operator

form-control

The wrapper class for the number area at the center

active

The active class will be added to the input-group-addon button, while touching them. So it's possible to implement your own behavior.

picker-unit-left

The picker-unit-left class will be added to the left unit span

picker-unit-right

The picker-unit-right class will be added to the right unit span

It's easy to implement those classes to achieve your own UI

run demo locally

Install npm dependency

npm install

Install bower dependency

bower install

run demo

npm start

I will launch a debug server at http://localhost:8000/

LICENSE

MIT License

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100