CODEWITHSUNDEEP
javascriptangularjs
Julian Be
Julian Be

Reputation: 128

AngularJS Ionic $timeout Show Minutes And seconds

I am making a countdown app, and I want to show the minutes And seconds until the countdown is finished. Do you have any ideas? I did it with the $interval, hopefully it's even possible to do it with that :D I'm pretty new to AngularJS and hope someone can help Me.

EDIT: Are you happy now? :^)

INDEX.html

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

    <ion-pane>
      <ion-header-bar class="bar-assertive">
        <h1 class="title">Pizza Timer</h1>
      </ion-header-bar>
        <ion-content class="padding" ng-controller="PopupCtrl">
          <div id="TimerStart">
            <!-- Button To Start the Timer -->
            <button class="button button-full button-assertive" ng-click="timerCountdown()">Start The Timer!</button>
            <!-- Shows the time -->
          </div>
          <div ng-app ng-controller="PopupCtrl">
            +++ TIMER SHOULD BE DISPLAYED HERE ++++
          </div>
      </ion-content>
    </ion-pane>
  </body>
</html>

app.js

    // Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var app = angular.module('starter', ['ionic'])

app.controller('PopupCtrl', function($scope, $ionicPopup, $timeout) {

$scope.format = 'mm:ss';

var stop;


// shows the alert when timer is finished
$scope.showAlert = function() {
     var alertPopup = $ionicPopup.alert({
       title: 'Your Pizza Is Ready!',
       template: 'Bon Appétit!'
     });

     alertPopup.then(function(res) {
       console.log('Pizza Is Ready!');
     });
   };

// countdown line 31 = time 
  $scope.timerCountdown = function(res){
    console.log('Timer is running!');
    var endtimer = $timeout(
      function() {
        var alertPopup = $ionicPopup.alert({
         title: 'Your Pizza Is Ready!',
         template: 'Bon Appétit!'});
      },
      2000);
  };
});

app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

Upvotes: 2

Views: 5257

Answers (1)

M4N
M4N

Reputation: 96626

You can use $interval to count-down. E.g. in your timerCountdown function you start the interval, and in the callback function (which is invoked every second), you decrement the number of seconds remaining.

Once the number of seconds is down to zero, display the popup message.

controller:

angular.module('app', ['ionic'])

.controller('countCtrl', function countController($scope, $interval, $ionicPopup){
    $scope.countDown = 0; // number of seconds remaining
    var stop;

    $scope.timerCountdown  = function(){
      // set number of seconds until the pizza is ready
      $scope.countDown = 10;

      // start the countdown
      stop = $interval(function() {
        // decrement remaining seconds
        $scope.countDown--;
        // if zero, stop $interval and show the popup
        if ($scope.countDown === 0){
          $interval.cancel(stop);
          var alertPopup = $ionicPopup.alert({
             title: 'Your Pizza Is Ready!',
             template: 'Bon Appétit!'});
        }
      },1000,0); // invoke every 1 second
    };
});

markup:

<body ng-app="app">
  <ion-pane ng-controller="countCtrl">
    <ion-content class="padding">
      <button class="button" ng-click="timerCountdown ()">Start countdown</button>
      <!-- show only if countdown is running -->
      <div ng-show="countDown>0">Your pizza is ready in {{countDown}} seconds.</div>
    </ion-content>
  </ion-pane>
</body>

See here for a working example.

Upvotes: 4

Related Questions