How to chage timer value format to MM:Sec from fixed counter in angular js

Question

I have AngularJS code for a timer where, on starting the counter, the timer starts its countdown backward from 300 to 0. It is working fine. But now I want to replace 300 with MM:SEC format(clock) i.e.,5:00 and go on and end at 0:00 which I am unable to do. My code

    angular.module('TimerApp', [])
      .controller('TimerCtrl', function($scope, $timeout) {
        $scope.counter = 300;

        var mytimeout = null; // the current timeoutID

        // actual timer method, counts down every second, stops on zero
        $scope.onTimeout = function() {
          if ($scope.counter === 0) {
            $scope.$broadcast('timer-stopped', 0);
            $timeout.cancel(mytimeout);
            return;
          }
          $scope.counter--;
          mytimeout = $timeout($scope.onTimeout, 1000);
        };

        $scope.startTimer = function() {
          mytimeout = $timeout($scope.onTimeout, 1000);
        };

        // stops and resets the current timer
        $scope.stopTimer = function() {
          $scope.$broadcast('timer-stopped', $scope.counter);
          $scope.counter = 30;
          $timeout.cancel(mytimeout);
        };

        // triggered, when the timer stops, you can do something here, maybe show a visual indicator or vibrate the device
        $scope.$on('timer-stopped', function(event, remaining) {
          if (remaining === 0) {
            console.log('your time ran out!');
          }
        });
      });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
  <div ng-app='TimerApp'>
    <div ng-controller="TimerCtrl">
      {{counter}}
      <button ng-click='startTimer()'>Start</button>
    </div>
  </div>

Working JSFiddle for above: http://jsfiddle.net/fq4vg/1796/

Possible duplicate of Angularjs seconds to time filter

Heretic Monkey
– Heretic Monkey

2016-09-12 17:59:28 +00:00
Commented Sep 12, 2016 at 17:59 — Heretic Monkey
– Heretic Monkey, Commented Sep 12, 2016 at 17:59

ngCoder · Accepted Answer · 2016-09-12 18:14:25Z

1

You can do some little changes like below.

angular.module('TimerApp', [])
  .controller('TimerCtrl', function($scope, $timeout) {
    $scope.counter = 300;
    $scope.time =  Math.floor($scope.counter/60)+':' +$scope.counter % 60;//time representation..
    var mytimeout = null; // the current timeoutID

    // actual timer method, counts down every second, stops on zero
    $scope.onTimeout = function() {
      if ($scope.counter === 0) {
        $scope.$broadcast('timer-stopped', 0);
        $timeout.cancel(mytimeout);
        return;
      }
      // var secs = 300;
      $scope.counter--;
      //decrement the clock representation...
      $scope.time = Math.floor($scope.counter/60)+':' +$scope.counter % 60;
      mytimeout = $timeout($scope.onTimeout, 1000);
    };

    $scope.startTimer = function() {
      mytimeout = $timeout($scope.onTimeout, 1000);
    };

    // stops and resets the current timer
    $scope.stopTimer = function() {
      $scope.$broadcast('timer-stopped', $scope.counter);
      $scope.counter = 30;
      $timeout.cancel(mytimeout);
    };

    // triggered, when the timer stops, you can do something here, maybe show a visual indicator or vibrate the device
    $scope.$on('timer-stopped', function(event, remaining) {
      if (remaining === 0) {
        console.log('your time ran out!');
      }
    });
  });

Your HTML will have below code.

<body>
  <div ng-app='TimerApp'>
    <div ng-controller="TimerCtrl">
      {{time}}
      <button ng-click='startTimer()'>Start</button>
    </div>
  </div>

edited Sep 12, 2016 at 18:14

answered Sep 12, 2016 at 18:02

ngCoder

2,1051 gold badge15 silver badges23 bronze badges

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

5 Comments

H Varma Over a year ago

.Thanks it is working.But when we have seconds from 0-9 ,i need 0 before them 1.e ex for 5 mins it is showing as 5:0 but not as 5:00 ..how it is possible?can you help me.jsfiddle.net/fq4vg/1801

ngCoder Over a year ago

Here's an updated Fiddle for your issue jsfiddle.net/fq4vg/1807

ngCoder Over a year ago

@HVarma did you sort out ? If this answer helps you can u upvote and accept it !

H Varma Over a year ago

.Yup it helped..I will accept it..Just with curiosity,will u get any money or such like when this many accepts your answer.I see many people asking same,when their answer helps..cheers

ngCoder Over a year ago

Nope its just your work gets recognised and it will help others who visit stackoverflow for answers.Looking at green tick it will help them analyse solution

Community · Accepted Answer · 2017-05-23 10:32:48Z

0

Why don't you try something like this: http://jsfiddle.net/z18j7o2q/2/

What you want is a custom filter. Answer borrowed from here

filter('secondsToDateTime', [function() {
  return function(seconds) {
    return new Date(1970, 0, 1).setSeconds(seconds);
  };
}])

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Sep 12, 2016 at 17:56

nikjohn

22.1k16 gold badges58 silver badges88 bronze badges

Collectives™ on Stack Overflow

How to chage timer value format to MM:Sec from fixed counter in angular js

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related