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

你需要跟踪你现在的所有时间，因为它是一个全球性的＆＃39;计时器whick改变所选玩家的时间。

因此，当您点击新线时，所选的玩家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。启动秒表到所选项目

1 个答案: