javascript - AngularJS。启动秒表至所选项目

我正在尝试用角度创建自己的篮球比赛得分网络应用程序，而我固执地解决了无法解决的问题。

我的计划是，您首先必须在玩家表中选择一行，然后按顶部的按钮向该列添加统计信息。到目前为止，除了时间列之外，一切都按我的要求工作。当我选择一个播放器并按“开始”时，时间将开始。但是，当我现在选择另一位玩家时，没有停止时间，前一位玩家的时间将停止，而另一位玩家的时间将开始。等等。

我希望第一名玩家的时间不会停止，直到我选择了他并按下Stop键。

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

提前致谢。

最佳答案

现在，您需要始终跟踪自己的操作方式，因为这是一种“全局”计时器，可以改变所选玩家的时间。

因此，当您单击新行时，所选玩家ID会更改，并且该玩家的计时器会增加

您应该跟踪所有计时器

$scope.timers = {};

并如下更改倒数功能

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

因此它将创建一个超时并保存返回给timers对象的promise

停止功能变为

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

检查更新的jsfiddle

关于javascript - AngularJS。启动秒表至所选项目，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35452059/