具有条件的Angular中的计时器

Question

我正在为我的项目使用 public IList<Question> SearchQuestions() { return _repo.Query<Question>().Include(q => q.User).ToList(); 插件，其中我显示项目的任务和持续时间我希望一次只运行一个计时器，然后点击其他启动按钮请禁用，请给我任何想法，如何在控制器内找到angularJs 中的所有计时器元素。

angular-timer

  

内部角度控制器

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

  

项目的虚拟数据

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

Answer 1

要做到这一点你的观点和控制器应该喜欢这个：

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

视图

<?php
function buildThumbGallery(){

    $h = opendir('/Recent_Additions/'); //Open the current directory
    while (false !== ($curDir = readdir($h))) {
        if (!file_exists('/Recent_Additions/thumbs/')) {
            $thumbDir = mkdir('/Recent_Additions/thumbs/', 0777, true);
        }else{
            $thumbDir = '/Recent_Additions/thumbs/';
        }
        $width = 200;
        $height = 200;
        foreach ($curDir as $image) {
            $filePath = $curDir."/".$image;
            $genThumbImg = $image->scaleImage($width, $height, true);
            $newThumb = imagejpeg($genThumbImg, $thumbDir, 100);

            echo '<li> <a class="fancybox" data-fancybox-group="'.basename($curDir).'" href="'.$filePath.'" title="'.basename($curDir)." ".strpbrk(basename($filePath, ".jpg"), '-').'"><img src="'.$newThumb.'"/>'.basename($curDir).'</a>';
            imagedestroy($newThumb);
        }echo '</li>';
}
?>

控制器

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

Answer 2

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

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