计数器的中间值(intermediate values of counter)

计数器的中间值(intermediate values of counter)

请帮助修复脚本。 http://jsfiddle.net/k9r4t/

在盘旋时 button_hover增加计数器的值。 但是当光标离开时，计数器的值显示在屏幕上。 button_hover。 并且用户只能看到计数器的初始值和最终值。

我希望用户看到中间值

控制器代码：

var app = angular.module("moduleCounter", []); app.controller("controllerCounter", function ($scope){ $scope.counter = 0; $scope.incrementCounter = function(){ $scope.startNext = setInterval(function(){ $scope.counter++; }, 400); } $scope.stopCounter = function(){ clearInterval($scope.startNext); } });

please help to fix the script. http://jsfiddle.net/k9r4t/

when hovering. button_hover increasing the value of the counter. but the value of the counter is displayed on the screen when the cursor leaves the. button_hover. and the user sees only the initial and final value of the counter.

I would like the user to see the intermediate values

controller code:

var app = angular.module("moduleCounter", []); app.controller("controllerCounter", function ($scope){ $scope.counter = 0; $scope.incrementCounter = function(){ $scope.startNext = setInterval(function(){ $scope.counter++; }, 400); } $scope.stopCounter = function(){ clearInterval($scope.startNext); } });

最满意答案

使用$timeout ，它是Angular的本机服务：

var app = angular.module("moduleCounter", []); app.controller("controllerCounter", function ($scope , $timeout){ $scope.counter = 0; $scope.incrementCounter = function(){ $scope.setTimeout(); } $scope.setTimeout = function(){ $scope.startNext = $timeout( $scope.counterUp , 400); } $scope.counterUp = function(){ $scope.counter++; $scope.setTimeout(); } $scope.stopCounter = function(){ $timeout.cancel($scope.startNext); } });

JSFiddle： http ： //jsfiddle.net/cherniv/k9r4t/1/

Use $timeout , it is Angular's native service:

var app = angular.module("moduleCounter", []); app.controller("controllerCounter", function ($scope , $timeout){ $scope.counter = 0; $scope.incrementCounter = function(){ $scope.setTimeout(); } $scope.setTimeout = function(){ $scope.startNext = $timeout( $scope.counterUp , 400); } $scope.counterUp = function(){ $scope.counter++; $scope.setTimeout(); } $scope.stopCounter = function(){ $timeout.cancel($scope.startNext); } });

JSFiddle: http://jsfiddle.net/cherniv/k9r4t/1/

计数器的中间值(intermediate values of counter)

请帮助修复脚本。 http://jsfiddle.net/k9r4t/

在盘旋时 button_hover增加计数器的值。 但是当光标离开时，计数器的值显示在屏幕上。 button_hover。 并且用户只能看到计数器的初始值和最终值。

我希望用户看到中间值

控制器代码：

var app = angular.module("moduleCounter", []); app.controller("controllerCounter", function ($scope){ $scope.counter = 0; $scope.incrementCounter = function(){ $scope.startNext = setInterval(function(){ $scope.counter++; }, 400); } $scope.stopCounter = function(){ clearInterval($scope.startNext); } });

please help to fix the script. http://jsfiddle.net/k9r4t/

when hovering. button_hover increasing the value of the counter. but the value of the counter is displayed on the screen when the cursor leaves the. button_hover. and the user sees only the initial and final value of the counter.

I would like the user to see the intermediate values

controller code:

var app = angular.module("moduleCounter", []); app.controller("controllerCounter", function ($scope){ $scope.counter = 0; $scope.incrementCounter = function(){ $scope.startNext = setInterval(function(){ $scope.counter++; }, 400); } $scope.stopCounter = function(){ clearInterval($scope.startNext); } });

最满意答案

使用$timeout ，它是Angular的本机服务：

var app = angular.module("moduleCounter", []); app.controller("controllerCounter", function ($scope , $timeout){ $scope.counter = 0; $scope.incrementCounter = function(){ $scope.setTimeout(); } $scope.setTimeout = function(){ $scope.startNext = $timeout( $scope.counterUp , 400); } $scope.counterUp = function(){ $scope.counter++; $scope.setTimeout(); } $scope.stopCounter = function(){ $timeout.cancel($scope.startNext); } });

JSFiddle： http ： //jsfiddle.net/cherniv/k9r4t/1/

Use $timeout , it is Angular's native service:

var app = angular.module("moduleCounter", []); app.controller("controllerCounter", function ($scope , $timeout){ $scope.counter = 0; $scope.incrementCounter = function(){ $scope.setTimeout(); } $scope.setTimeout = function(){ $scope.startNext = $timeout( $scope.counterUp , 400); } $scope.counterUp = function(){ $scope.counter++; $scope.setTimeout(); } $scope.stopCounter = function(){ $timeout.cancel($scope.startNext); } });

JSFiddle: http://jsfiddle.net/cherniv/k9r4t/1/