By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,471 Members | 722 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,471 IT Pros & Developers. It's quick & easy.

show a div when timer count down reaches < 00:00

P: 1
I have a scenario where i need to show a div when the timer total value is < 0 Here is the directive code:
Expand|Select|Wrap|Line Numbers
  1. angular.module('iSourcingApp.tpModule')
  2. .directive('stopWatch', function($state) {
  3.     return {
  4.         restrict: 'A',
  5.         replace: false,
  6.         scope: {
  7.             name: "=",
  8.             timeOfInterview: "=",
  9.             onSend: '&',
  10.             startInterview: '&',
  11.             viewPage: "="
  12.         },
  13.         controller: function($scope, $rootScope, $interval) {
  14.             debugger
  15.             $rootScope.showDiv = {};
  16.             $scope.getTimeRemaining = function(endtime) {
  17.                 $scope.t[$scope.name].total = Date.parse(endtime) - Date.parse(new Date());
  18.                 $scope.t[$scope.name].seconds = Math.floor(($scope.t[$scope.name].total / 1000) % 60);
  19.                 $scope.t[$scope.name].minutes = Math.floor(($scope.t[$scope.name].total / 1000 / 60) % 60);
  20.                 $scope.t[$scope.name].hours = Math.floor(($scope.t[$scope.name].total / (1000 * 60 * 60)) % 24);
  21.                 $scope.t[$scope.name].days = Math.floor($scope.t[$scope.name].total / (1000 * 60 * 60 * 24));
  22.             }
  23.             $scope.initializeClock = function(endtime) {
  24.                 debugger
  25.                 $scope.t = {};
  26.                 $scope.t[$scope.name] = {};
  27.                 $scope.updateClock = function() {
  28.                     debugger
  29.                     $scope.getTimeRemaining(endtime);
  30.                     $scope.t[$scope.name].hours = ('0' + $scope.t[$scope.name].hours).slice(-2);
  31.                     $scope.t[$scope.name].minutes = ('0' + $scope.t[$scope.name].minutes).slice(-2);
  32.                     $scope.t[$scope.name].seconds = ('0' + $scope.t[$scope.name].seconds).slice(-2);
  33.                     if ($scope.t[$scope.name].total == 0) {
  34.                         console.log($scope.t[$scope.name].total);
  35.                         $interval.cancel($scope.timeinterval);
  36.                         $rootScope.showDiv[$scope.name] = true;
  37.                         alert("Start interview for " + $scope.name);
  38.                     } else {
  39.                         if ($scope.t[$scope.name].total < 0) {
  40.                             $interval.cancel($scope.timeinterval);
  41.                             $rootScope.showDiv[$scope.name] = true;
  42.                         }
  43.                     }
  44.                 }
  45.                 $scope.updateClock();
  46.                 $scope.timeinterval = $interval($scope.updateClock, 1000);
  47.             }
  48.             $scope.initializeClock($scope.timeOfInterview);
  49.         },
  50.         templateUrl: function() {
  51.             var tpl = $state.current.name;
  52.             return './tpModule/views/' + tpl + '.html';
  53.         }
  54.     };
  55. });
  56.  
Here if $scope.t[$scope.name].total < 0then i am setting showDiv to true and when it is true i m showing a div

Expand|Select|Wrap|Line Numbers
  1. <div ng-show="showDiv[candidateInfo.name]" class="col-xs-offset-4 showDiv">
  2.             <p class="timer-text">The interview for {{candidateInfo.name}} has crossed scheduled time</p>
  3.             <div class="row showDiv" >
  4.                 <a class="timer-text col-xs-3" style="cursor:pointer" ng-click="fnReschedule(candidateInfo.name, candidateInfo.recruiter)"><i >reschedule</i></a>
  5.                 <a class="timer-text col-xs-3" style="cursor:pointer" ng-click="fnStartInterview(candidateInfo.name,candidateInfo.presentRound,candidateInfo.askedQuestions,candidateInfo._id,candidateInfo.dateOfInterview)"><i class="text-center">start interview</i></a>
  6.             </div>
  7.         </div>
  8.  
So,what is happening here is initially some template is shown and after a sec or so the div is shown but i need not show the template initially if the timer is < 0

and the timer is different for different candidates

Any help would be appreciated.
Aug 5 '16 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.