angularjs做了一个简单的倒计时
angularjs做了一个简单的倒计时
提问于 2012-08-21 15:39:03
我想用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 }}刷新它没有，你能帮我吗？谢谢!
回答 5
Stack Overflow用户
发布于 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);
}Stack Overflow用户
发布于 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));
};
});Stack Overflow用户
发布于 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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12050268
复制相关文章
相似问题