##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.
- node.js, npm, ionic, bower and gulp.
##How to use:
- In your project repository install the ionic time picker using bower
bower install ionic-numberpicker --save
- Give the path of
ionic-numberpicker.bundle.min.js
in yourindex.html
file.
<!-- path to ionic/angularjs js -->
<script src="lib/ionic-numberpicker/dist/ionic-numberpicker.bundle.min.js"></script>
- In your application module inject the dependency
ionic-numberpicker
, in order to work with theionic-numberpicker
component
angular.module('modulename', ['ionic', 'ionic-numberpicker']){
}
- 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);
}
};
- 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>
<b>{{ weight }} {{ weightType }}</b>
</div>
##Versions:
- Fixed issue with floating point math
- Added support for negative numbers
- Number picker functionality has been implemented
##License: MIT
##Contact: email : [email protected]
##Other Links:
- GitHub
- Rate it or Comment : Ionic Marketplace