使用 ng-repeat 格式化表格，2 个数组答案

【问题标题】：Formatting a table, 2 arrays using ng-repeat使用 ng-repeat 格式化表格，2 个数组
【发布时间】：2015-02-19 03:17:13
【问题描述】：

我在尝试使用 ng-repeat 格式化使用两个数组创建的表时遇到问题。我有两个数组； game.Teams[0].Scores 和 game.Teams[1].Scores，以及以下 html：

<table>
    <tr>
        <th>
            Team 0 Scores
        </th>
        <th>
            Team 1 Scores
        </th>
    </tr>
    <tr ng-repeat="score in game.Teams[0].Scores">
        <td>
            {{score.ExtraPoints}}
        </td>
        <td>
            ????
        </td>
    </tr>
</table>

我想遍历两个列表并用第二个列表中的项目填充第二列。这是否可以通过 ng-repeat 实现，还是我必须将两者合并并在组合列表中循环？

【问题讨论】：

当您从服务器检索数据时，您能否设置一个包含两支球队得分的不同数组？（或更改服务器发送的内容）？所以你会有一个像game.Scores[0].team[0]、game.Scores[0].team[1]和game.Scores[1].team[0]、game.Scores[1]这样的数组].team[1], ...

标签： angularjs

【解决方案1】：

假设两个团队拥有相同数量的物品

<table ng-init="scores = game.Teams[0].Scores.length > game.Teams[1].Scores.length ? game.Teams[0].Scores : game.Teams[1].Scores">
    <tr>
        <th>
            Team 0 Scores
        </th>
        <th>
            Team 1 Scores
        </th>
    </tr>
    <tr ng-repeat="score in scores">
        <td>
            {{game.Teams[0].Scores[$index].ExtraPoints}}
        </td>
        <td>
            {{game.Teams[1].Scores[$index].ExtraPoints}}
        </td>
    </tr>
</table>

注意：您可以在控制器中执行 ngInit 部分，只是在视图中显示如何完成所有操作。

【讨论】：

他们会有不同数量的项目，所以我需要另一个计数器而不是我猜的 $index
因此，在某一时刻，Team 0 的分数可能比 Team 1 长。该表格将包含 Team 1 的空单元格 (<td>s)
可以，但是换一种方式会有问题；如果 Team 1 比 Team 0 长。那么它不会填满该列。