Angular Counter

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

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

Dependencies

• jQuery >= 1.7.1
• jQuery Easing by gsgd, CDN here
• AngularJS

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:

<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:

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

Usage

<!-- `counter` directive can be used as: Element / Class / Attribute -->
<div    class="counter"
        value="ctrl.myValue"
           to="ctrl.myTarget"
     duration="ctrl.myDuration"
       effect="ctrl.myEffect"
       finish="ctrl.counterFinish()"> {{ ctrl.myValue | number:0 }} % </div>

<!-- bind counter value anywhere -->
<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. 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.