javascript - 使用 AngularJS 在同一表行中重复一组 <td>

Question

我想创建一个表格，在其标题中包含每个 .作用域有一个变量 teams这是一组 Team 对象，每个对象都有 Player 对象列表作为属性。

事实证明这比我预期的要难得多。

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

是我想到的最简单的事情 - 但这不起作用。根据 W3C(据我了解)不能放在 a 内，因此浏览器只获取 div 并将其放在表外。

我也尝试过指令 - 但这些都没有帮助。这是我的指令文件的示例。

<th ng-repeat="player in team.players">{[ player.name ]}</th>
<th>Partial Score</th>
<th>Total Score</th> 

例如，如果我有一个 <player-initials>带有 replace: 'false' 的指令, 浏览器排除非 <th>表中的元素。设置replace: 'true' ，解决了这个问题，但随后我收到一个错误，因为指令中有多个根元素。我不能用任何东西包装指令中的元素，因为那样会导致无效的 HTML(如上所述)。

我已经尝试了元素和属性指令的所有组合并替换，没有任何东西能满足我的要求。有帮助吗？

Answer 1

创建了一个 fiddle here .

希望这就是您正在寻找的，如果不是，请告诉我您正在寻找的格式。您的 HTML 应如下所示。

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