我想用Angular js做一个countDown。这是我的代码:
Html文件
<div ng-app ng-controller = "countController"> {{countDown}} <div>
js文件
function countController($scope){
$scope.countDown = 10;
var timer = setInterval(function(){$scope.countDown--; console.log($scope.countDown)},1000);
}
在console.log中,我有一个倒计时,但在{{ countdown }}刷新它没有,你能帮我吗?谢谢!
发布于 2012-08-21 15:53:44
当您从angular框架外部执行一个angular表达式时,您应该使用$scope.$apply()。
function countController($scope){
$scope.countDown = 10;
var timer = setInterval(function(){
$scope.countDown--;
$scope.$apply();
console.log($scope.countDown);
}, 1000);
}
发布于 2014-01-10 04:23:26
我更新了ganaraj先生的回答,以显示停止和恢复功能,并添加了角度js过滤器,以格式倒计时计时器
控制器代码
'use strict';
var myApp = angular.module('myApp', []);
myApp.controller('AlbumCtrl', function($scope,$timeout) {
$scope.counter = 0;
$scope.stopped = false;
$scope.buttonText='Stop';
$scope.onTimeout = function(){
$scope.counter++;
mytimeout = $timeout($scope.onTimeout,1000);
}
var mytimeout = $timeout($scope.onTimeout,1000);
$scope.takeAction = function(){
if(!$scope.stopped){
$timeout.cancel(mytimeout);
$scope.buttonText='Resume';
}
else
{
mytimeout = $timeout($scope.onTimeout,1000);
$scope.buttonText='Stop';
}
$scope.stopped=!$scope.stopped;
}
});
filter-改编自stackoverflow的RobG代码
myApp.filter('formatTimer', function() {
return function(input)
{
function z(n) {return (n<10? '0' : '') + n;}
var seconds = input % 60;
var minutes = Math.floor(input / 60);
var hours = Math.floor(minutes / 60);
return (z(hours) +':'+z(minutes)+':'+z(seconds));
};
});
发布于 2014-08-10 22:39:54
function timerCtrl ($scope,$interval) {
$scope.seconds = 0;
var timer = $interval(function(){
$scope.seconds++;
$scope.$apply();
console.log($scope.countDown);
}, 1000);
}
https://stackoverflow.com/questions/12050268
复制相似问题