How to make a seconds countdown using angular?

Question

I'm looking on how to make a 60 seconds countdown using angular js.

I want to show the countdown on the page ! and when the countdown is finished, the controller should reload to execute the code again ! and get the update json object !

my controller looks like :

.controller('todaymatches', function($rootScope,$scope, $http) {

    $http.get("http://www.domaine.com/updatedjson/")
        .success(function (response) {
            $scope.matches = response;
        });
})

I'm made a code ! I'm not sure if this works properly ! anyway it's not working on my app.

$scope.countdown = function() {
    stopped = $timeout(function() {
       console.log($scope.counter);
     $scope.counter--;   
     $scope.countdown();   
    }, 1000);
  };

Take a look at Angular's directives documentation here : docs.angularjs.org/guide/directive Look for "Creating a Directive that Manipulates the DOM". — cl3m
– cl3m, Commented Jun 1, 2015 at 15:03

Alex Pan · Accepted Answer · 2015-06-01 15:16:39Z

3

Here is a simple countdown example:

HTML

<!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="CountdownController">
      {{counter}}
   </div>
</body>
</html>

Javascript

function CountdownController($scope,$timeout) {
    $scope.counter = 60;
    $scope.onTimeout = function(){
        if ($scope.counter > 0) {
            $scope.counter--;
            mytimeout = $timeout($scope.onTimeout,1000);
        } else {
            $scope.counter = 60;
        }
    }
    var mytimeout = $timeout($scope.onTimeout,1000);   
}

Demo

answered Jun 1, 2015 at 15:16

Alex Pan

4,7618 gold badges39 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yasser B. Over a year ago

That works great ! do you have any idea how can I reload the controller when the 60 seconds is over ??

Alex Pan Over a year ago

@YasserB., in my answer, when the counter gets to 0, the countdown is reset in the else statement. You add that logic there to reload the countdown.

Dmitri Algazin · Accepted Answer · 2015-06-01 15:25:54Z

'use strict';

var ngApp = angular.module('myApp', ['Test']);

var c1 = angular.module('Test', []);
c1.controller('Ctrl1', function ($scope, $timeout) {

    $scope.coutDown = function () {

        $scope.onTimeout = function () {
            console.log("value", $scope.value);
            $scope.value = $scope.value - 1;
            return $scope.coutDown($scope.value);
        };
        var delay = $timeout($scope.onTimeout, 1000);

        if ($scope.value < 1) {
            $timeout.cancel(delay);
            return true;
        }
        return false;
    };

    $scope.value = 5;
    $scope.coutDown();

});


<div ng-app="myApp">
    <div ng-controller="Ctrl1">
        <h1>{{value}}</h1>
    </div>
</div>

http://jsfiddle.net/pbxaD/49/

chresse · Accepted Answer · 2015-06-01 15:27:55Z

1

if you want to use $timeout you have to inject it. But why don't you just call the update method in a certain interval?

.controller('todaymatches', function($rootScope,$scope, $http, $interval) {

    var update = function() {
        $http.get("http://www.domaine.com/updatedjson/")
        .success(function (response) {
            $scope.matches = response;
        });
    };

    var initialize = function() {
        $interval(function() {
            update();
        }, 60 * 1000)
    };

    initialize();
})

edited Jun 1, 2015 at 15:27

answered Jun 1, 2015 at 15:08

chresse

5,8873 gold badges35 silver badges50 bronze badges

Comments

Arathi Sreekumar · Accepted Answer · 2015-06-01 15:15:24Z

I tried this for the count down and it seems to work.

app.controller('CountDownController', function($scope, $timeout) {
    $scope.counter = 60;
    $scope.countdown = function() {
        if ($scope.counter === 0) {
            // do your reload and execute here
            //Just reset the counter if you just want it to count again
            $scope.counter = 60;
            return;
        } else {
            $timeout(function() {
                console.log($scope.counter);
                $scope.counter--;
                $scope.countdown();
            }, 1000);
        }
    };
    $scope.countdown();
});

You could tie up the various things you want to do inside the if condition of the above code as commented. I just reset the counter after counting down to 0.

Collectives™ on Stack Overflow

How to make a seconds countdown using angular?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related