Question

我从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]是指游戏ID＆＃39; 0＆＃39;在json feed中，有没有办法在{{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个游戏

任何见解都将受到赞赏！

Answer 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>

完美运作

Answer 2

有几个问题：

对错误对象的迭代，迭代应该在scoreboard.games.game而不是scoreboard上进行。
语法 x in list 只应在 ng-repeat 中使用，以迭代数组，{{strong> 1}}和scoreboard不是数组，它们是对象文字

如the documentation中所述，在ng-repeat中迭代Object文字的语法为scoreboard.games.game。

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

(key, value) in object

ng-repeat对象中的自动递增

2 个答案: