AngularJS. Начать секундомер по выбранному элементу

Question

Я пытаюсь создать свой собственный баскетбольный бокс-счет, создающий веб-приложение с угловым, и у меня есть проблема, которую я не могу исправить.

Мой план состоит в том, что сначала нужно выбрать строку в таблице игроков, а затем нажать кнопку сверху, чтобы добавить статистику к этому столбцу. Пока все работает так, как я хочу, кроме столбца времени. Когда я выберу игрока и нажмем «Старт», начнется время. Но когда я сейчас выбираю другого игрока, не останавливаясь, время предыдущего игрока остановится, и начнется время другого игрока. И так далее.

Я бы хотел, чтобы время первого игрока не остановилось, пока я не выбрал его и не нажал кнопку остановки.

JSFiddle

HTML

<div class="container" ng-app ng-controller="MyCtrl"> 

    <div class="btn-group"> 
    <button class="btn" ng-click="start()">Start</button> 
    <button class="btn" ng-click="stop()">Stop</button> 
    <button class="btn btn-success" ng-click="addPts()">Points</button> 
    <button class="btn btn-success" ng-click="addRbd()">Rebounds</button> 
    <button class="btn btn-success" ng-click="addAst()">Assists</button> 
    <button class="btn btn-success" ng-click="addStl()">Steals</button> 
    <button class="btn btn-success" ng-click="addBlk()">Blocks</button> 
    <button class="btn btn-warning" ng-click="addFls()">Fouls</button> 

    </div> 

    <table class="table table-bordered"> 
    <tr> 
     <td>#</td> 
     <td>Name</td> 
     <td>Aeg</td> 
     <td>Pts</td> 
     <td>Reb</td> 
     <td>Ast</td> 
     <td>Stl</td> 
     <td>Blk</td> 
     <td>Fls</td> 
    </tr> 
    <tr ng-repeat="player in team" ng-click="selectedPlayer($index)" ng-class="{'selected': playerId == $index, 'out':player.Fouls >= 5}"> 
     <td> 
     {{player.Nr}} 
     </td> 
     <td> 
     {{player.Name}} 
     </td> 
     <td> 
     {{player.Time | secondsToDateTime | date:'mm:ss'}} 
     </td> 
     <td> 
     {{player.Points}} 
     </td> 
     <td> 
     {{player.Rebounds}} 
     </td> 
     <td> 
     {{player.Assists}} 
     </td> 
     <td> 
     {{player.Steals}} 
     </td> 
     <td> 
     {{player.Blocks}} 
     </td> 
     <td> 
     {{player.Fouls}} 
     </td> 
    </tr> 
    </table> 
</div> 

JS

var myApp = angular.module('myApp', []); 

function MyCtrl($scope, $timeout) { 



    $scope.team = [{ 
    "Nr": 23, 
    "Name": "Michael Jordan", 
    "Time": 0, 
    "Points": 0, 
    "Rebounds": 0, 
    "Assists": 0, 
    "Steals": 0, 
    "Blocks": 0, 
    "Fouls": 0 
    }, { 
    "Nr": 91, 
    "Name": "Dennis Rodman", 
    "Time": 0, 
    "Points": 0, 
    "Rebounds": 0, 
    "Assists": 0, 
    "Steals": 0, 
    "Blocks": 0, 
    "Fouls": 0 
    }] 

    function countdown() { 
    $scope.team[$scope.playerId]["Time"]++; 
    $scope.timeout = $timeout(countdown, 1000); 
    } 

    $scope.start = function() { 
    countdown(); 
    }; 

    $scope.stop = function() { 
    $timeout.cancel($scope.timeout); 
    }; 

    $scope.playerId = null; 
    $scope.selectedPlayer = function(id) { 
    $scope.playerId = id; 

    }; 

    $scope.addPts = function() { 
    $scope.team[$scope.playerId]["Points"] += 2; 
    }; 
    $scope.addRbd = function() { 
    $scope.team[$scope.playerId]["Rebounds"] += 1; 
    }; 
    $scope.addAst = function() { 
    $scope.team[$scope.playerId]["Assists"] += 1; 
    }; 
    $scope.addStl = function() { 
    $scope.team[$scope.playerId]["Steals"] += 1; 
    }; 
    $scope.addBlk = function() { 
    $scope.team[$scope.playerId]["Blocks"] += 1; 
    }; 
    $scope.addFls = function() { 
    if ($scope.team[$scope.playerId]["Fouls"] < 5) 
     $scope.team[$scope.playerId]["Fouls"] += 1; 
    }; 

}; 
myApp.filter('secondsToDateTime', [function() { 
    return function(seconds) { 
     return new Date(1970, 0, 1).setSeconds(seconds); 
    }; 
    }]) 

Спасибо заранее.

Answer 1

Вам нужно отслеживать все время, как вы это делаете, теперь это «глобальный» таймер, изменяющий время для выбранного игрока.

Итак, когда вы нажимаете на новую строку выбранные изменения ID игрока и таймер этого игрока увеличивает

вы должны отслеживать все таймеры с

$scope.timers = {}; 

и изменить функцию обратного отсчета следующим образом

function countdown(id) { 
    $scope.team[id]["Time"]++; 
    $scope.timers[id] = $timeout(countdown.bind(null, id), 1000); 
} 

поэтому он создает тайм-аут и сохраняет обещание возвращается к таймерам объект

и функция останова становится

$scope.stop = function() { 
    $timeout.cancel($scope.timers[$scope.playerId]); 
}; 

проверить обновленный jsfiddle