https://github.com/indrimuska/angular-counter

An AngularJS directive to animate number increment/decrement.
https://github.com/indrimuska/angular-counter

Last synced: about 2 months ago
JSON representation

An AngularJS directive to animate number increment/decrement.

• Host: GitHub
• URL: https://github.com/indrimuska/angular-counter
• Owner: indrimuska
• License: mit
• Created: 2015-10-12T11:16:37.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2020-06-20T16:17:20.000Z (over 4 years ago)
• Last Synced: 2024-07-19T19:11:46.035Z (2 months ago)
• Language: JavaScript
• Homepage: http://indrimuska.github.io/angular-counter/
• Size: 6.07 MB
• Stars: 64
• Watchers: 5
• Forks: 32
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Angular Counter

[![Join the chat at https://gitter.im/indrimuska/angular-counter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/indrimuska/angular-counter?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

**Angular Counter** is a *directive* to animate number increment/decrement.

Check out the demo page at http://indrimuska.github.io/angular-counter.

![Angular Counter](https://cloud.githubusercontent.com/assets/1561134/25781148/caaaec2e-3335-11e7-96cc-f23de5ccc272.gif)

## Dependencies

* [jQuery](https://jquery.com/) >= 1.7.1

* [jQuery Easing](http://gsgd.co.uk/sandbox/jquery/easing/) by gsgd, CDN [here](http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js)

* [AngularJS](https://angularjs.org/)

## Installation

Get **Angular Counter** from `npm`, `bower` or `git`:

```

  npm install angular-counter

bower install angular-counter-animation

  git clone   https://github.com/indrimuska/angular-counter.git 

```

Update your HTML file:

```html

```

And your AngularJS module:

```js

var app = angular.module('MyApp', ['counter']);

```

## Usage

```html

 {{ ctrl.myValue | number:0 }} % 




```

**INFO**: Animation starts every time the attribute `to` changes.

**Directive examples:** http://plnkr.co/edit/d1KPDa?p=preview

## Service

*Angular Counter* directive makes use of a built-in service `$counter` with a single function `.count(..)` that requires the following parameters:

Parameter | Type | Description

---|---|---

object | `object` | Object containing the number to animate.

property | `string` | Property of `object` to be updated.

from | `float` | Initial number.

to | `float` | Target number to reach.

duration | `integer` | Duration of the animation in ms.

effect | `string` | Effect name.

step | `function` | Callback after each animation step.
Remember to `$apply` the scope!

finish | `function` | Callback at the end of the animation.

## License

Copyright (c) 2015 Indri Muska. Licensed under the MIT license.