AngularJS compte pour compter jusqu'à un nombre cible

Je suis nouveau chez Angular et j'aimerais mettre en œuvre la même extension de fonction simple dans JQuery, mais utiliser la directive (dans la mesure où je comprends, c'est comme ça que cela devait être fait).

Quelqu'un connaît-il une implémentation immédiate?

Ma recherche s'est terminée uniquement avec les solutions JQuery et je ne sais pas comment la convertir en Angular.

C'est ce que je devais faire:

Lien vers l'exemple: http://jsfiddle.net/YWn9t/

Pouvez-vous aider?

Déclaration de fonction:

$.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 }; 

comment utiliser:

 jQuery(function($) { $('.timer').countTo({ from: 50, to: 2500, speed: 5000, refreshInterval: 50, onComplete: function(value) { console.debug(this); } }); }); 

Html:

 <span class="timer"></span> 

Tiré de: stackoverflow

Regardez cette directive http://siddii.github.io/angular-timer/ . Je crois que cela répond à toutes vos exigences.

Bien, cela n'a pas fonctionné pour moi, je n'ai pas trouvé la bonne mise en œuvre, mais cela m'aide à mettre en œuvre ma propre 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(); }] }}]) 

https://github.com/Kop4lyf/angular-animation-counter

Bien que pas aussi général que http://siddii.github.io/angular-timer/ , il est petit et sert le but basique.

J'espère que cela aide.

Comme il semble que personne ne soit capable de fournir une solution simple et facile à utiliser sans inclure une énorme dépendance et fournissant un code lisible / de qualité. Il s'agit d'une directive super simple pour 1.6.x angulaire qui utilise l'interpolation.

HTML

 <ng-Counter target="mymodel.countvalue" speed="10" start="mymodel.startfromvalue"/> 

Celui-ci possède 3 attributs:

  • Cibler le nombre pour atteindre
  • Accélérer la vitesse …
  • Démarrer le numéro à partir de

Il gérera à la fois le compte à rebours et le bas. Il commence également à compter chaque fois que le modèle cible est mis à jour, si vous définissez le démarrage, il réinitialisera le compteur chaque fois qu'il sera mis à jour.

NgCounter.js :

 app.directive("ngCounter", function() { return { restrict: 'E', template: "<span>{{value | number:0}}</span>", scope: { target: "=", speed: "=?", start: "=?", }, link: function ($scope, $element, $attributes) { }, controller: function ($scope, $element, $attrs, $timeout) { $scope.target = 0; $scope.start = 0; $scope.speed = 1; $scope.$watch("target", (newTarget) => { $scope.target = newTarget; $scope.tickNumber(); }); $scope.$watch("start", (newStart) => { $scope.value = newStart; $scope.tickNumber(); }); $scope.$watch("speed", (newSpeed) => { $scope.speed = newSpeed; }); $scope.interpolate = function(current, target, delta, speed = 1.0) { if( InterpSpeed <= 0.0 ) { return target; } var distance = target - current; if( distance * distance < 0.000001 ) { return target; } var move = distance * Math.min(Math.max(delta * speed, 0.0), 1.0); return current + move; } var delta = 1 / 60; $scope.updateNumber = () => { $scope.value = $scope.interpolate($scope.value, $scope.target, 0.05, $scope.speed); }; $scope.tickNumber = () => { if(Math.abs($scope.value - $scope.target) > 0) { $scope.updateNumber(); $timeout($scope.tickNumber, 50); } }; }, }; });