Angularjs do a simple countdown

Question

Angularjs do a simple countdown

I would like to do countDown with Angular js. this is my code:

Html file

<div ng-app ng-controller = "countController"> {{countDown}} <div>

js file

 function countController($scope){ $scope.countDown = 10; var timer = setInterval(function(){$scope.countDown--; console.log($scope.countDown)},1000); }

in console.log it works, I have a countdown, but in {{countdown}} it is updated, could you help me, please? thank!

+48

javascript html angularjs templates countdown

user1613464 Aug 21 2018-12-12T00:

source share

9 answers

ganaraj · Answer 1 · 2012-08-21 07:55

Please take a look at this example here. This is a simple example of counting! Which, I think, you can easily change to create a countdown.

http://jsfiddle.net/ganarajpr/LQGE2/

JavaScript Code:

 function AlbumCtrl($scope,$timeout) { $scope.counter = 0; $scope.onTimeout = function(){ $scope.counter++; mytimeout = $timeout($scope.onTimeout,1000); } var mytimeout = $timeout($scope.onTimeout,1000); $scope.stop = function(){ $timeout.cancel(mytimeout); } }

HTML markup:

 <!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.0rc11.min.js"></script> <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script> </head> <body> <div ng-controller="AlbumCtrl"> {{counter}} <button ng-click="stop()">Stop</button> </div> </body> </html>

jpfreire · Answer 2 · 2014-03-10 01:12

Starting with version 1.3, in the ng module: $interval

 function countController($scope, $interval){ $scope.countDown = 10; $interval(function(){console.log($scope.countDown--)},1000,0); }

Use with caution:

Note. Intervals created by this service should be clearly destroyed when you are done with them. In particular, they are not automatically destroyed when the control area or directive element is destroyed. You must take this into account and always cancel the interval at the appropriate time. See the example below for more details on how and when to do this.

From: Angular official documentation .

Artem Andreev · Answer 3 · 2012-08-21 07:53

You must use $ scope. $ apply () when executing an angular expression from outside the angular structure.

 function countController($scope){ $scope.countDown = 10; var timer = setInterval(function(){ $scope.countDown--; $scope.$apply(); console.log($scope.countDown); }, 1000); }

http://jsfiddle.net/andreev_artem/48Fm2/

Shaheen · Answer 4 · 2014-01-09 20:23

I updated Mr. ganaraj's answer to show the stop and resume function and added an angular js filter to format the countdown timer

he is here on jsFiddle

controller code

 '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 code adapted from RobG from https://stackoverflow.com>.

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

shapeshifter · Answer 5 · 2012-08-30 02:00

https://groups.google.com/forum/?fromgroups=#!topic/angular/2MOB5U6Io0A

The setInterval call uses a different jsfiddle from Igor Minar, showing the use of $ defer and wrapping $.

Anil Singh · Answer 6 · 2014-12-20 05:59

It may help "How to write countdown code in AngularJS"

Step 1: HTML Sample Code

 <div ng-app ng-controller="ExampleCtrl"> <div ng-show="countDown_text > 0">Your password is expired in 180 Seconds.</div> <div ng-show="countDown_text > 0">Seconds left {{countDown_text}}</div> <div ng-show="countDown_text == 0">Your password is expired!.</div> </div>

Step 2: Sample AngulaJs Code

 function ExampleCtrl($scope, $timeout) { var countDowner, countDown = 10; countDowner = function() { if (countDown < 0) { $("#warning").fadeOut(2000); countDown = 0; return; // quit } else { $scope.countDown_text = countDown; // update scope countDown--; // -1 $timeout(countDowner, 1000); // loop it again } }; $scope.countDown_text = countDown; countDowner() }

A complete example of countdown in AngularJs, as shown below.

 <!DOCTYPE html> <html> <head> <title>AngularJS Example - Single Timer Example</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> <script> function ExampleCtrl($scope, $timeout) { var countDowner, countDown = 10; countDowner = function() { if (countDown < 0) { $("#warning").fadeOut(2000); countDown = 0; return; // quit } else { $scope.countDown_text = countDown; // update scope countDown--; // -1 $timeout(countDowner, 1000); // loop it again } }; $scope.countDown_text = countDown; countDowner() } </script> </head> <body> <div ng-app ng-controller="ExampleCtrl"> <div ng-show="countDown_text > 0">Your password is expired in 180 Seconds.</div> <div ng-show="countDown_text > 0">Seconds left {{countDown_text}}</div> <div ng-show="countDown_text == 0">Your password is expired!.</div> </div> </body> </html>

Betite · Answer 7 · 2014-08-10 14:39

 function timerCtrl ($scope,$interval) { $scope.seconds = 0; var timer = $interval(function(){ $scope.seconds++; $scope.$apply(); console.log($scope.countDown); }, 1000); }

kingsman · Answer 8 · 2016-09-22 08:25

How I did it, it works!

* angular version 1.5.8 and higher.

Angular code

 var app = angular.module('counter', []); app.controller('MainCtrl', function($scope,$interval) { var decreamentCountdown=function() { $scope.countdown -=1; if($scope.countdown<1) { $scope.message="timed out"; } }; var startCountDown=function() { $interval(decreamentCountdown,1000,$scope.countdown) }; $scope.countdown=100; startCountDown(); });

HTML view code.

 <!DOCTYPE html> <html ng-app="counter"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <link href="style.css" rel="stylesheet" /> <script src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8" data-require="angular.js@1.5.x"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> {{countdown}} {{message}} </body> </html>

Partha Roy · Answer 9 · 2017-04-17 07:15

 var timer_seconds_counter = 120; $scope.countDown = function() { timer_seconds_counter--; timer_object = $timeout($scope.countDown, 1000); $scope.timer = parseInt(timer_seconds_counter / 60) ? parseInt(timer_seconds_counter / 60) : '00'; if ((timer_seconds_counter % 60) < 10) { $scope.timer += ':' + ((timer_seconds_counter % 60) ? '0' + (timer_seconds_counter % 60) : '00'); } else { $scope.timer += ':' + ((timer_seconds_counter % 60) ? (timer_seconds_counter % 60) : '00'); } $scope.timer += ' minutes' if (timer_seconds_counter === 0) { timer_seconds_counter = 30; $timeout.cancel(timer_object); $scope.timer = '2:00 minutes'; } }

Angularjs do a simple countdown

JavaScript Code:

HTML markup:

More articles: