Formatting a table, 2 arrays using ng-repeat

Question

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>

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?

Could you setup a different array with the two teams scores when you retreive it from the server? (Or change what the server is sending)? So you'd have an array like game.Scores[0].team[0], game.Scores[0].team[1], and game.Scores[1].team[0], game.Scores[1].team[1], ... — Nicholas Hirras
– Nicholas Hirras, Commented Feb 18, 2015 at 19:06

TheSharpieOne · Accepted Answer · 2015-02-18 19:17:13Z

1

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>

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

edited Feb 18, 2015 at 19:17

answered Feb 18, 2015 at 19:07

TheSharpieOne

25.7k9 gold badges72 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andreas Over a year ago

They will have a different amount of items, so I would need another counter than the $index I guess

TheSharpieOne Over a year ago

So at one point, Team 0 Scores could be longer than Team 1. The table will have empty cells (<td>s) for Team 1

Andreas Over a year ago

Yes, but the other way would be problematic; if Team 1 is longer than Team 0. Then it wouldn't fill the column.

Collectives™ on Stack Overflow

Formatting a table, 2 arrays using ng-repeat

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related