推动以ng-repeat角度渲染的表格中的行

Question

当客户端点击该行时,我想在表中插入一行额外的行.数据不应该被预取,因为我预计最多有30行,但每行都有相关的数据,这些数据在一次获取中是不合理的.

到目前为止,我的方法是使用ng-repeat来迭代我的集合并渲染表格.当客户端按下该行时,客户端希望有关该行的详细信息在内联显示为按下的行下的额外行.

<tr ng-repeat="court in courts">            
  <td>{{court.name}}</td>
  <td>{{court.number}}</td>
  <td>{{court.nrOfPlayers}}</td>
  <td>
    <a href ng:click="toggle(court.number)">Details</a>  <!-- click toggles extra row with data loaded async -->
  </td>
</tr>
<!-- extra row here -->

我已经成功地以一种黑客的方式展示了桌子底下的细节,但这不是我想要的.

你如何用angular.js实现这一目标？有角度的方法是什么？

这里有一个愚蠢的壁球场示例http://jsfiddle.net/HByEv/

Answer 1

我认为一个可能的解决方案可能是http://jsfiddle.net/HByEv/2/.

如果你想要除去额外的东西,还可以选择在小提琴中评论的"No players"消息<tr ng-show="..."></tr>.

编辑:

正如评论中所指出的,在AngularJS 1.2+中,您现在可以使用ng-repeat-start并ng-repeat-end解决此问题.

Jossef Harush提供了一个小提琴:http://jsfiddle.net/3yamebfw/