AngularJS計數器達到目標數

Question

我是Angular的新手，並且想在JQuery中實現相同的簡單函數擴展， 但使用指令（據我瞭解，這是它應該如何完成的）。

確實準備好了嗎？

我的搜索結果只有JQuery解決方案，我不知道如何將其轉換爲Angular。

這就是我需要做的：

鏈接，例如：http://jsfiddle.net/YWn9t/

你能幫忙嗎？

函數聲明：

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

如何使用：

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

HTML：

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

摘自：在本指令

Answer 1

看。我相信這符合你的所有要求。

Answer 2

那麼它沒有爲我工作，我沒有找到正確的實現，但它可以幫助我實現我自己的指令。

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(); 
     }] 
    }}]) 

Answer 3

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

雖然沒有像一般http://siddii.github.io/angular-timer/，它是小和供應的基本宗旨。

希望它有幫助。

Answer 4

因爲看起來像沒有人能夠提供簡單易用的解決方案，而不包括巨大的依賴性並提供可讀/高質量的代碼。這是一個超級簡單的指令，用於使用插值的角度1.6.x。

HTML

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

這其中有3個屬性：

• 目標數量達到
• 速度速度..
• 開始數量開始從

它會處理這兩個計數&下來。每當目標模型更新時也會自動開始計數，如果您定義了開始，那麼只要更新了計數器，它就會重置計數器。

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); 
       } 
      }; 

     }, 
    }; 

});