Skip to content

uditalias/live-digits

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

live-digits v1.0.0

AngularJS module for slide animation digits inside numbers

Working Demo

Installation

$ bower install --save live-digits

Usage

Just import live-digits.min.js and live-digits.min.css and add it to your app module

<head>
  <link rel="stylesheet" href="bower_components/live-digits/dist/live-digits.css" />
  <script src="bower_components/live-digits/dist/live-digits.min.js"></script>
  
  <script>
    angular.module('myApp', ['udidu.live-digits'])
      .controller('mainController', ['$scope', '$timeout', function ($scope, $timeout) {
          
          $scope.liveValue = 100000;
          
          function _updateLiveValue() {
            $scope.liveValue = (Math.random() * 200000) + 100000;
            $timeout(_updateLiveValue, 1000);
          }
          
          _updateLiveValue();
      }]);
  </script>
</head>

<body ng-app="myApp" ng-controller="mainController">
  <!-- use the directive like this example: -->
  <live-digits value="liveValue" duration="300"></live-digits>
</body>

Options

The only 2 options you can config are value and duration

The value is the number (or string yeah!) which will be watched by the directive to animate the value change.

The duration is optional and specifies the animation duration in milliseconds (default is 200).

Dependencies

"dependencies": {
  "angular": ">=1.x",
  "jquery": ">=1.x"
}

Build

Clone the project and run:

$ npm install

$ grunt build

The dist/ folder will erase and the new build files will be copy into it

License

MIT

About

AngularJS module for slide animation digits inside numbers

Resources

License

Stars

Watchers

Forks

Packages

No packages published