ng-repeat 对象中的自动增量答案

【问题标题】：Auto Increment in ng-repeat objectng-repeat 对象中的自动增量
【发布时间】：2017-08-18 18:12:43
【问题描述】：

我从 mlb.com 获取游戏信息并使用 angularjs 和 ng-repeat 指令显示它们。下面是 JSON 提要的示例。

{
 "data": {
    "games": {
        "next_day_date": "2017-08-19",
        "modified_date": "2017-08-18T16:57:16Z",
        "month": "08",
        "year": "2017",
        "game": {
            "0": [{
                "away_team_name": "CUBS"

            }, {
                "home_team_name": "INDIANS"

            }],
            "1": [{
                "away_team_name": "CUBS"

            }, {
                "home_team_name": "INDIANS"

            }]
        },
        "day": "18"
    }
}

我只能正确显示数据，但只有 1 场比赛。下面是html

<div class="card mb-3" ng-repeat="x in scoreboard" ng-if="$index > 1">
  <div class="card-header" align="center">
   {{x.games.game[0].away_team_name}} ({{x.games.game[0].away_win}}-{{x.games.game[0].away_loss}}) At {{x.games.game[0].home_team_name}} ({{x.games.game[0].home_win}}-{{x.games.game[0].home_loss}})<br>
      <small>{{x.games.game[0].time}}</small>
  </div>
  <div class="card-block"></div>
</div>

我明白 [0] 指的是 json 提要中的游戏 ID '0'，但是有没有办法在 {{x.games.game[0].time}} 中自动增加该数字以循环遍历所有游戏，而不是像下面那样单独执行每个游戏？

<div class="card mb-3" ng-repeat="x in scoreboard" ng-if="$index > 1">
  <div class="card-header" align="center">
   {{x.games.game[0].away_team_name}} ({{x.games.game[0].away_win}}-{{x.games.game[0].away_loss}}) At {{x.games.game[0].home_team_name}} ({{x.games.game[0].home_win}}-{{x.games.game[0].home_loss}})<br>
      <small>{{x.games.game[0].time}}</small>
  </div>
  <div class="card-block"></div>
</div>
<div class="card mb-3" ng-repeat="x in scoreboard" ng-if="$index > 1">
  <div class="card-header" align="center">
   {{x.games.game[1].away_team_name}} ({{x.games.game[1].away_win}}-{{x.games.game[1].away_loss}}) At {{x.games.game[1].home_team_name}} ({{x.games.game[1].home_win}}-{{x.games.game[1].home_loss}})<br>
      <small>{{x.games.game[1].time}}</small>
  </div>
  <div class="card-block"></div>
</div>

我试过了 {{x.games.game[$index + 1].time}} 但仍然只返回 1 场比赛

任何见解将不胜感激！

【问题讨论】：

@Hadi 表示从 'index' 1 开始
你试过用$index: x.games.game[$index].away_team_name
$index + 1 可能会在最后一次迭代中导致数组索引越界错误。
您正在迭代scoreboard 本身！这就是为什么你只会得到一个结果。
我相信你想遍历scoreboard.games.game，对吗？

标签： javascript angularjs json

【解决方案1】：

我在控制器中调整了我的 $scope

.success(function (data) { $scope.scoreboard = data;}

到

.success(function (data) {$scope.scoreboard = response.data.games.game;}

html 现在看起来像

<div class="card mb-3" ng-repeat="x in scoreboard track by $index" ng-if="$index > 1">
  <div class="card-header" align="center">{{x.away_team_name}} </div>
</div>

完美运行

【讨论】：

【解决方案2】：

有几个问题：

对错误对象的迭代，应该对 scoreboard.games.game 而不是 scoreboard 进行迭代。
语法 x in list 只能用于 ng-repeat 遍历数组，scoreboard 和 scoreboard.games.game 都不是数组，它们是对象字面量

在 ng-repeat 中迭代 Object 字面量的语法是 (key, value) in object，如 the documentation 中所述。

要正确解决这个问题，我们必须使用正确的语法迭代正确的对象，方法如下：

<div class="card mb-3" ng-if="key > 1"
     ng-repeat="(key, game) in scoreboard.games.game">

   <div class="card-header" align="center">
      {{ game.away_team_name }} 
      ({{ game.away_win }}-{{ game.away_loss }}) At 
      {{ game.home_team_name }} 
      ({{ game.home_win }}-{{ game.home_loss }})<br />
      <small>{{ game.time }}</small>
   </div>
   <div class="card-block"></div>
</div>

【讨论】：