Skip to content

milkcan/ionic-numberpicker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

##Introduction:

This is a ionic-numberpicker bower component which can be used with any Ionic framework's application.

It is based on the 'ionic-timepicker' and 'ionic-datepicker' by https://github.com/rajeshwarpatlolla

##Prerequisites.

  1. node.js, npm, ionic, bower and gulp.

##How to use:

  1. In your project repository install the ionic time picker using bower

bower install ionic-numberpicker --save

  1. Give the path of ionic-numberpicker.bundle.min.js in your index.html file.
<!-- path to ionic/angularjs js -->
<script src="lib/ionic-numberpicker/dist/ionic-numberpicker.bundle.min.js"></script>
  1. In your application module inject the dependency ionic-numberpicker, in order to work with the ionic-numberpicker component
angular.module('modulename', ['ionic', 'ionic-numberpicker']){

}
  1. Use the below format in your template's corresponding controller
$scope.numberPickerObject = {
    inputValue: 0, //Optional
    minValue: -9007199254740991,
    maxValue: 9007199254740991,
    precision: 3,  //Optional
    decimalStep: 0.25,  //Optional
    format: "DECIMAL",  //Optional - "WHOLE" or "DECIMAL"
    unit: "",  //Optional - "m", "kg", "℃" or whatever you want
    titleLabel: 'Number Picker',  //Optional
    setLabel: 'Set',  //Optional
    closeLabel: 'Close',  //Optional
    setButtonType: 'button-positive',  //Optional
    closeButtonType: 'button-stable',  //Optional
    callback: function (val) {    //Mandatory
    timePickerCallback(val);
  }
};
  1. Add directive to your html template similar to:
<div class="item item-input">
    <span class="input-label">Weight</span>
    <ionic-numberpicker input-obj="numberPickerObject">
      <button class="button button-positive order-button">
        <i class="ion-archive"></i>
      </button>
    </ionic-numberpicker>&nbsp;
    <b>{{ weight }} {{ weightType }}</b>
</div>

##Versions:

2) v1.1

  • Fixed issue with floating point math
  • Added support for negative numbers

1) v1.0

  • Number picker functionality has been implemented

##License: MIT

##Contact: email : [email protected]

##Other Links:

About

Number Picker plugin for Ionic Framework

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •