javascript - Angular 中的计时器(有条件)

Question

我正在为我的项目使用angular-timer插件，其中我显示带有任务和持续时间的项目我只想一次仅运行一个计时器并单击其他开始按钮都将被禁用，请给我任何想法来执行此操作，我如何在 Controller 内找到 angularJs 中的所有计时器元素。

<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"

        }];

Answer 1

要做到这一点，你的 View 和 Controller 应该像这样:

了解更多详情here a worked demo that can help you

查看

<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();
                  }

                });

            }
        };

<小时/>