0

我正在angular-timer为我的项目使用插件，我在其中显示带有任务和持续时间的项目我想一次只运行一个计时器，然后单击其他开始按钮，所有这些都将被禁用，请给我任何想法，我该怎么做在控制器内的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>

内部 Angular 控制器

$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';
            }
        };

项目的虚拟数据

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

        }];
4

2 回答 2

2

要做到这一点，您的视图和控制器应该是这样的：

有关更多详细信息，这里有一个可以帮助您的工作演示

看法

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

控制器

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

                });

            }
        };
于 2015-12-12T09:12:25.147 回答
1

我这样做............

 $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);
        }
    };
于 2015-12-12T11:28:32.830 回答