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.
