Have ideas to improve npm?Join in the discussion! »

    angular-counter

    0.2.1 • Public • Published

    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:

    Parameter Type Description
    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.

    Install

    npm i angular-counter

    DownloadsWeekly Downloads

    73

    Version

    0.2.1

    License

    MIT

    Last publish

    Collaborators

    • avatar