I would like make a 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}} refresh it doesn't could you help me please? thanks!
This question is related to
javascript
html
templates
countdown
angularjs
You should use $scope.$apply() when you execute an angular expression from outside of the angular framework.
function countController($scope){
$scope.countDown = 10;
var timer = setInterval(function(){
$scope.countDown--;
$scope.$apply();
console.log($scope.countDown);
}, 1000);
}
I updated Mr. ganaraj answer to show stop and resume functionality and added angular js filter to format countdown timer
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 stackoverflow
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));
};
});
Please take a look at this example here. It is a simple example of a count up! Which I think you could easily modify to create a count down.
http://jsfiddle.net/ganarajpr/LQGE2/
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);
}
}
<!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>
$scope.countDown = 30;
var timer;
$scope.countTimer = function () {
var time = $timeout(function () {
timer = setInterval(function () {
if ($scope.countDown > 0) {
$scope.countDown--;
} else {
clearInterval(timer);
$window.location.href = '/Logoff';
}
$scope.$apply();
}, 1000);
}, 0);
}
$scope.stop= function () {
clearInterval(timer);
}
IN HTML:
<button type="submit" ng-click="countTimer()">Start</button>
<button type="submit" ng-click="stop()">Clear</button>
As of version 1.3 there's a service in module ng: $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 must be explicitly destroyed when you are finished with them. In particular they are not automatically destroyed when a controller's scope or a directive's element are destroyed. You should take this into consideration and make sure to always cancel the interval at the appropriate moment. See the example below for more details on how and when to do this.
function timerCtrl ($scope,$interval) {
$scope.seconds = 0;
var timer = $interval(function(){
$scope.seconds++;
$scope.$apply();
console.log($scope.countDown);
}, 1000);
}
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';
}
}
The way I did , it works!
Angular code
var app = angular.module('counter', []);_x000D_
_x000D_
app.controller('MainCtrl', function($scope, $interval) {_x000D_
var decreamentCountdown = function() {_x000D_
$scope.countdown -= 1;_x000D_
if ($scope.countdown < 1) {_x000D_
$scope.message = "timed out";_x000D_
}_x000D_
};_x000D_
var startCountDown = function() {_x000D_
$interval(decreamentCountdown, 1000, $scope.countdown)_x000D_
};_x000D_
$scope.countdown = 100;_x000D_
startCountDown();_x000D_
});<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.min.js"></script>_x000D_
_x000D_
_x000D_
_x000D_
<body ng-app="counter" ng-controller="MainCtrl">_x000D_
{{countdown}} {{message}}_x000D_
</body>You probably didn't declare your module correctly, or you put the function before the module is declared (safe rule is to put angular module after the body, once all the page is loaded). Since you're using angularjs, then you should use $interval (angularjs equivalence to setInterval which is a windows service).
Here is a working solution:
angular.module('count', [])_x000D_
.controller('countController', function($scope, $interval) {_x000D_
$scope.countDown = 10;_x000D_
$interval(function() {_x000D_
console.log($scope.countDown--);_x000D_
}, 1000, $scope.countDown);_x000D_
});<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.1/angular.min.js"></script>_x000D_
_x000D_
_x000D_
<body>_x000D_
<div ng-app="count" ng-controller="countController"> {{countDown}} </div>_x000D_
</body>Note: it stops at 0 in the html view, but at 1 in the console.log, can you figure out why? ;)
It might help to "How to write the code for countdown watch in AngularJS"
Step 1 : HTML Code-sample
<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 : The AngulaJs code-sample
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()
}
The full example over countdown watch in AngularJs as given 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>
Source: Stackoverflow.com