Angular Touchspin
angular-touchspin is a port of istvan-ujjmeszaros/bootstrap-touchspin. It could now show some differences with it.
The goal is to provide the same API than the original one but without jQuery and using all the angular power.
Requirements
AngularJS
≥1.4.x
Bootstrap
≥3.x
for the default styles (Can usebootstrap-css-only
, you must add this to your bower or include this manually)- NOTE: please check the requirements for earlier releases, if these are an issue.
Where to get it
Via Bower:
Run bower install angular-touchspin
from the command line.
Include script tags similar to the following:
Via NPM:
Run npm install angular-touchspin
from the command line.
Include script tags similar to the following:
Install using commonjs (eg componentjs, Webpack, Browserify):
angular.module('myModule', [require('angular-touchspin')]);
For CSS support with Webpack, install the style-loader, css-loader (and postcss-loader) and configure the loader in your webpack.config.js similar to the following:
loaders: [
{test: /\.css$/, loader: 'style!css!postcss'}
]
Via Github
Download the code from https://github.com/nkovacic/angular-touchspin/releases/latest, unzip the files then add script tags similar to the following:
Usage
- Include
angular-touchspin.min.js
- Add a dependency to
angular-touchspin
in your app module, for example:angular.module('myModule', ['nk.touchspin'])
. - Create an element to hold the control and add an
ng-model="numberVariable"
attribute wherenumberVariable
is the scope variable that will hold the selected number value:
OR
This acts similar to a regular AngularJS / form input if you give it a name attribute, allowing for form submission and AngularJS form validation.
Options
angular-touchspin can be configured using an options attribute options="optionsVariable"
where optionsVariable
is the scope variable that will hold options for the touchspin control.
OR
Available options:
interface ITouchSpinOptions buttonDownClass?: string; buttonDownShow?: boolean; buttonDownTxt?: string; buttonUpClass?: string; buttonUpShow?: boolean; buttonUpTxt?: string; min?: number; max?: number; step?: number; decimals?: number; decimalsDelimiter?: string; stepInterval?: number; forceStepDivisibility?: string; // none | floor | round | ceil inputReadOnly?: boolean; stepIntervalDelay?: number; verticalButtons?: boolean; verticalUpClass?: string; verticalDownClass?: string; prefix?: string; postfix?: string; prefixExtraClass?: string; postfixExtraClass?: string; mousewheel?: boolean;
It also supports min and max attributes for validating input value range (useful if the default value is not preffered).
Callback
angular-touchspin supports callback on model change using an attribute on-change="valueChanged(value,oldValue)"
where valueChanged
is the scope function that will be called on change.
OR