https://github.com/nkovacic/angular-touchspin

Angular touchspin
https://github.com/nkovacic/angular-touchspin

angular bootstrap3 bower typescript webpack

Last synced: about 1 month ago
JSON representation

Angular touchspin

• Host: GitHub
• URL: https://github.com/nkovacic/angular-touchspin
• Owner: nkovacic
• License: mit
• Created: 2016-02-03T10:29:13.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2019-01-13T15:39:10.000Z (almost 6 years ago)
• Last Synced: 2024-09-28T16:06:28.849Z (about 2 months ago)
• Topics: angular, bootstrap3, bower, typescript, webpack
• Language: TypeScript
• Size: 190 KB
• Stars: 10
• Watchers: 3
• Forks: 7
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Angular Touchspin

[![License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](http://www.opensource.org/licenses/MIT)

[![NPM Release](https://img.shields.io/npm/v/angular-touchspin.svg?style=flat-square)](https://www.npmjs.org/package/angular-touchspin)

[![NPM Monthly Downloads](https://img.shields.io/npm/dm/angular-touchspin.svg?style=flat-square)](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):

```javascript

import { default as touchspinModule } from 'angular-touchspin';

import 'angular-touchspin/dist/angular-touchspin.css'; 

angular.module('myModule', [touchspinModule]);

```

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

```

### Demo

The demo can be found on [stackblitz](https://stackblitz.com/edit/angular-touchspin-example) and features all the examples found in the [dev](https://github.com/nkovacic/angular-touchspin/tree/master/dev) folder in this repository.

### 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 {

	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).

```html

```

### 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.

```html



```

OR

```html


```