Skip to content

izy-izzy/angular-counter

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Angular Counter

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

Angular Counter is a directive to animate number increment/decrement

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.5.*/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.

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.

About

An AngularJS directive to animate number increment/decrement.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%