# Angular Touchspin
[](https://travis-ci.org/nkovacic/angular-touchspin)
[](https://codeclimate.com/github/nkovacic/angular-touchspin)
[](https://codeclimate.com/github/nkovacic/angular-touchspin)
[](http://www.opensource.org/licenses/MIT)
[](https://www.npmjs.org/package/angular-touchspin)
[](https://www.npmjs.org/package/angular-touchspin)
**angular-touchspin** is a port of [istvan-ujjmeszaros/bootstrap-touchspin](https://github.com/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
1. `AngularJS` ≥ `1.4.x`
1. `Bootstrap` ≥ `3.x` for the default styles (Can use `bootstrap-css-only`, you must add this to your bower or include this manually)
5. 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:
```html
```
**Via NPM:**
Run `npm install angular-touchspin` from the command line.
Include script tags similar to the following:
```html
```
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](https://github.com/nkovacic/angular-touchspin/releases/latest), unzip the files then add script tags similar to the following:
```html
```
### Usage
3. Include `angular-touchspin.min.js`
4. Add a dependency to `angular-touchspin` in your app module, for example: ```angular.module('myModule', ['nk.touchspin'])```.
5. Create an element to hold the control and add an `ng-model="numberVariable"` attribute where `numberVariable` is the scope variable that will hold the selected number value:
```html
```
OR
```html
```
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.
```html
```
OR
```html
```
Available options:
```javascript
interface ITouchSpinOptions {
min?: number;
max?: number;
step?: number;
decimals?: number;
stepInterval?: number;
forceStepDivisibility?: string; // none | floor | round | ceil
stepIntervalDelay?: number;
verticalButtons?: boolean;
verticalUpClass?: string;
verticalDownClass?: string;
prefix?: string;
postfix?: string;
prefixExtraClass?: string;
postfixExtraClass?: string;
mousewheel?: boolean;
buttonDownClass?: string;
buttonUpClass?: string;
buttonDownTxt?: string;
buttonUpTxt?: string;
}
```
### Callback
angular-touchspin supports callback on model change using an attribute `on-change="valueChanged(value)"` where `valueChanged` is the scope function that will be called on change.
```html
```
OR
```html
```