javascript - Repeating a set of s in the same table row using AngularJS -

javascript - Repeating a set of <td>s in the same table row using AngularJS -

i want create table that, in header, contains names of each player 2 teams in each . scope has variable teams list of team objects, each 1 having list of player objects attribute.

this turning out way harder expected.

<table> <thead> <tr> <div ng-repeat="team in teams"> <th ng-repeat="player in team.players">{[ player.name ]}</th> <th>partial score</th> <th>total score</th> </div> </tr> </thead> </table>

is easiest thing have in mind - doesn't work. can't placed within according w3c (from understand), browser takes div , places outside table.

i've tried directives - these don't help. illustration of directive file.

<th ng-repeat="player in team.players">{[ player.name ]}</th> <th>partial score</th> <th>total score</th>

for example, if have <player-initials> directive replace: 'false', browser expels non-<th> element out of table. setting replace: 'true', fixes that, error because there's more 1 root element in directive. can't wrap elements in directive because result in invalid html (as above).

i've tried combinations of element , attribute directives , replace, nil gives me want. help?

created fiddle here.

hope looking for, if not allow me know format looking for. html should below.

<table ng-repeat="team in teams"> <tr> <td colspan="3"> {{team.name}} </td> </tr> <tr> <td>player name</td> <td>partial score</td> <td>total score</td> </tr> <tr ng-repeat="player in team.players"> <td>{{player.name}}</td> <td>{{player.pscore}}</td> <td>{{player.tscore}}</td> </tr> </table>

javascript html css angularjs