AngularJS。启动秒表到所选项目

Question

我正在尝试使用 angular 创建我自己的篮球得分制作网络应用程序，但我遇到了一个我无法解决的问题。

我的计划是，您首先必须 select 在玩家 table 中占一行，然后按顶部的按钮向该列添加统计信息。到目前为止，除了时间栏外，一切都按我的意愿进行。当我 select 一个玩家并按下 'Start' 时，时间就会开始。但是当我现在 select 另一个玩家时，没有停止时间，前一个玩家的时间将停止，另一个玩家的时间将开始。等等。

我希望第一个玩家的时间不会停止，直到我 selected 他并按下停止。

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

你需要一直跟踪你正在做的事情，现在它是一个 'global' 计时器，它会改变所选玩家的时间。

因此，当您单击新行时，所选玩家 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

AngularJS。启动秒表到所选项目

AngularJS. Start stopwatch to a selected item

javascript

stopwatch

angularjs