KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #developer-tools #ai-agent #claude-code #codex #typescript #ai-agents #deepseek-harness #mcp #cli #rust

angular-counter

★ 63 Open GitHub ↗

An AngularJS directive to animate number increment/decrement.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="./js/angular-counter.js"></script>
```

And your AngularJS module:
```js
var app = angular.module('MyApp', ['counter']);
```

## Usage

```html

<div    class="counter"
        value="ctrl.myValue"
           to="ctrl.myTarget"
     duration="ctrl.myDuration"
       effect="ctrl.myEffect"
       finish="ctrl.counterFinish()"> {{ ctrl.myValue | number:0 }} % </div>

<span ng-bind="ctrl.myValue"></span>
```
**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.<br><small>Remember to `$apply` the scope!</small>
finish | `function` | Callback at the end of the animation.

angular-counter

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README