格式化表格，2阵列采用NG-重复 [英] Formatting a table, 2 arrays using ng-repeat

问题描述

试图格式化用NG-重复两个数组创建表​​时，我有一个问题。我有两个数组; game.Teams [0] .Scores和game.Teams [1] .Scores，以及以下的HTML

I have a problem when trying to format a table created with two arrays using ng-repeat. I have the two arrays; game.Teams[0].Scores and game.Teams[1].Scores, and the following 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-重复，否则我将拥有一个组合列表的两个循环合并？

I want to loop over both lists and fill the second column with items from the second list. Is this achievable with ng-repeat, or will I have to merge the two and loop over a combined list?

推荐答案

假设两支球队有一个项目相同数量的

Assuming both teams have the same amount of items

<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 在控制器中的一部分，只是显示它如何在视图中完成所有的

Note: you can do that ngInit part in the controller, just showing how it can be done all in the view.

这篇关于格式化表格，2阵列采用NG-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！