Timer in Angular with conditions

Question

I am using angular-timer plug-in for my project where i show projects with task and duration i want to run only one timer at a time and on click other start button all will be disable , please give me any idea to do this , how can i find all the timer element in angularJs inside the controller.

<tr ng-repeat="project in projects" id="{{project.id}}">
                    <td>{{project.id}}</td>
                    <td>{{project.name}}</td>
                    <td>{{project.task}}</td>
                    <td>{{project.estimation}}</td>
                    <td><timer interval="1000">{{hours}} hour{{hoursS}}, {{minutes}} min{{minutesS}}, {{seconds}} sec{{secondsS}}.</timer></td>
                    <td><input type="text" class="text-center" value="{{project.comment}}"></td>
                    <td>
                        <button ng-click="startStopTimer($event,project.id)" ng-disabled="timerRunning" class="btn btn-success">Start</button>
                        <button  ng-click="resumeTimer($event,project.id)" class="btn btn-warning">Pause</button>
                        <button class="btn btn-danger">Delete</button>
                    </td>
                </tr>

Inside Angular controller

$scope.timerRunning = false;

        $scope.startStopTimer = function ($event,sectionId) {
            console.log($event.currentTarget.innerHTML);
            if ($event.currentTarget.innerHTML === 'Start') {
                console.log('---------------ssssss-------------');
                console.log($scope);

                document.getElementById(sectionId).getElementsByTagName('timer')[0].stop();
                $event.currentTarget.innerHTML = 'Stop';
                $scope.timerRunning = false;
                angular.forEach(function(sectionId) {
                    document.getElementById(sectionId).getElementsByTagName('timer')[0].stop();
                });
            }
            else {
                console.log($event);
                console.log('---------------resume-------------');
                document.getElementById(sectionId).getElementsByTagName('timer')[0].start();
                $event.currentTarget.innerHTML = 'Start';
            }
        };

Dummy data for projects

 $scope.projects = [{
            "id": "1",
            "name": "Project 1",
            "time": "1pm - 2.30 pm",
            "comment": "some comment on project",
            "estimation": "1.5 hr",
            "task": "Working on project task"
        }, {
            "id": "2",
            "name": "Project 2",
            "time": "1pm - 2.30 pm",
            "comment": "some comment on project",
            "estimation": "5 hr",
            "task": "Working on project task"
        }, {
            "id": "3",
            "name": "Project 3",
            "time": "1pm - 2.30 pm",
            "comment": "some comment on project",
            "estimation": "6 hr",
            "task": "Working on prject task"

        }];

aitnasser · Accepted Answer · 2015-12-12 09:12:25Z

to do it your view and controller should be lik this:

for more details here a worked demo that can help you

view

<tr ng-repeat="project in projects" id="{{project.id}}">
      <td>{{project.id}}</td>
      <td>{{project.name}}</td>
      <td>{{project.task}}</td>
      <td>{{project.estimation}}</td>
      <td>
        <timer autostart="false" interval="1000" >{{hours}} hour{{hoursS}}, {{minutes}} min{{minutesS}}, {{seconds}} sec{{secondsS}}.</timer>
      </td>
      <td>
        <input type="text" class="text-center" value="{{project.comment}}"/>
      </td>
      <td>
        <button ng-click="startStopTimer($event,project.id)" ng-disabled="timerRunning" class="btn btn-success">Start</button>
        <button ng-click="resumeTimer($event,project.id)" class="btn btn-warning">Pause</button>
        <button class="btn btn-danger">Delete</button>
      </td>
    </tr>

Controller

     $scope.startStopTimer = function ($event,sectionId) {             
            if ($event.currentTarget.innerHTML === 'Start') {
              console.log('---------------ssssss-------------');

                angular.forEach($scope.projects,function(project,id) {
                  if(sectionId!==project.id){
                      document.getElementById(project.id).getElementsByTagName('timer')[0].stop();
                       document.getElementById(project.id).getElementsByTagName('button')[0].innerHTML='Start';
                  }                  

                });
                $event.currentTarget.innerHTML = 'Stop';
                 document.getElementById(sectionId).getElementsByTagName('timer')[0].start();
            }
            else {
                console.log('---------------resume-------------');

                 angular.forEach($scope.projects,function(project,id) {

                  if(sectionId==project.id){
                       $event.currentTarget.innerHTML = 'Start';
                      document.getElementById(project.id).getElementsByTagName('timer')[0].stop();
                  }

                });

            }
        };

Anil Yadav · Accepted Answer · 2015-12-12 11:28:32Z

I do this ....................

 $scope.changeText = function ($event) {
        var list = document.getElementsByClassName('timer');
        for (var i = 0; i < list.length; i++) {
            list[i].innerHTML = 'Start';
        }
        $event.currentTarget.innerHTML = 'Stop';
    };

    $scope.startStopTimer = function ($event, sectionId) {
        $scope.$broadcast('timer-stop');
        if ($event.currentTarget.innerHTML === 'Start') {
            console.log('-------------Start--------------------')
            document.getElementById(sectionId).getElementsByTagName('timer')[0].start();
            $event.currentTarget.innerHTML = 'Stop';
            $scope.changeText($event);
        }
        else {
            console.log($event);

            document.getElementById(sectionId).getElementsByTagName('timer')[0].stop();
            $event.currentTarget.innerHTML = 'Start';
            $scope.changeText($event);
        }
    };

Collectives™ on Stack Overflow

Timer in Angular with conditions

2 Answers 2

view

Controller

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

view

Controller

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related