An AngularJS directive to animate number increment/decrement.
JavaScript
Latest commit 23f5136 May 11, 2016 @indrimuska Update README.md

README.md

Angular Counter

Join the chat at https://gitter.im/indrimuska/angular-counter

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

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

Angular Counter

Dependencies

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.