AngularJS counter to count up to a target number
Well it didn't worked for me, i didn't find the right implementation but it helps me to implement my own directive.
html:
<count-up count-to="1000" interval="1"></count-up>
directive.js
directive('countUp', ['$compile',function($compile,$timeout) {
return {
restrict: 'E',
replace: false,
scope: {
countTo: "=countTo",
interval: '=interval'
},
controller: ['$scope', '$element', '$attrs', '$timeout', function ($scope, $element, $attrs, $timeout) {
$scope.millis = 0;
if ($element.html().trim().length === 0) {
$element.append($compile('<span>{{millis}}</span>')($scope));
} else {
$element.append($compile($element.contents())($scope));
}
var i=0;
function timeloop () {
setTimeout(function () {
$scope.millis++;
$scope.$digest();
i++;
if (i<$scope.countTo) {
timeloop();
}
}, $scope.interval)
}
timeloop();
}]
}}])
Liad Livnat
Awesome client side / server side / mobile (HTML5) / facebook developer. Web Client: AngularJS, Backbone.js, Ember.js, Javascript(JQuery), HTML5, CSS3. Server: PHP - cake, CodeIgniter, Symfony, Laravel, Ruby , MVC 4.0, C# and ASP.NET 4.0 Database: MongoDB, mySQL, MSSQL ,Azure, Google Cloud : Azure, Amazon EC2, engineyard, Rackspace Source Controls: TFS, SVN, BitBucket, Git http://il.linkedin.com/in/liadl/ http://liadlivnat.com
Updated on June 28, 2022Comments
-
Liad Livnat almost 2 years
I'm new to Angular, and would like to implement the same easy function extension in JQuery, but use directive (as far as i understand this is how it supposed to be done).
does somone know ready implimentation?
my search ended up only with JQuery solutions and i don't know how to convert it to Angular.
this is what i needed to do:
link to example: http://jsfiddle.net/YWn9t/
can you help?
function declaration:
$.fn.countTo.defaults = { from: 0, // the number the element should start at to: 100, // the number the element should end at speed: 1000, // how long it should take to count between the target numbers refreshInterval: 100, // how often the element should be updated decimals: 0, // the number of decimal places to show onUpdate: null, // callback method for every time the element is updated, onComplete: null, // callback method for when the element finishes updating };
how to use:
jQuery(function($) { $('.timer').countTo({ from: 50, to: 2500, speed: 5000, refreshInterval: 50, onComplete: function(value) { console.debug(this); } }); });
html:
<span class="timer"></span>
taken from: stackoverflow
-
Playdome.io almost 7 yearsUse $timeout instead of settimeout