angular-counter-directive

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

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

In your JS code:

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

Usage

counter directive can be used as: Element / Class / Attribute

<div class="counter"

value="ctrl.myValue"

to="ctrl.myTarge"

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.

Service

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

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.

comments powered by Disqus
This page was last updated 7 months ago.