在与角NG重复呈现表行推 [英] Push rows in a table rendered with ng-repeat in angular

问题描述

我想在一个额外的行内联推在一个表中，当客户端点击该行。这些数据不应该是prefetched，因为我期待有至多30行，但其中每一行都具有关联的，这将是不合理的一个GET来获取数据。

I want to push in an extra row inline in a table when the client clicks on the row. The data should not be prefetched, since I expect there to be at most 30 rows but where each row has associated data that would be unreasonable to fetch in one get.

我的做法，到目前为止是采用NG-重复迭代我收集和呈现一个表。当客户端presses行，客户端预计将内嵌显示为pressed行下一个额外的行有关该行的详细信息。

My approach so far is to use ng-repeat to iterate my collection and render a table. When the client presses the row, the client expects details about the row to be shown inline as an extra row under the pressed row.

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

我已成功地展现了NG-展现在哈克的方式表格下方的细节，但是这不是我想要的。

I have managed to show the details beneath the table with a ng-show in a hacky way, but that is not what I want.

如何与angular.js做到这一点？什么是做到这一点的角度方式？

How do you accomplish this with angular.js? What is the angular way to do this?

下面是一个愚蠢的壁球场例如小提琴 http://jsfiddle.net/HByEv/

Here is a fiddle with a stupid squash court example http://jsfiddle.net/HByEv/

推荐答案

我觉得一个可能的解决方案可能是 HTTP： //jsfiddle.net/HByEv/2/ 。

I think a possible solution could be http://jsfiddle.net/HByEv/2/.

有也是在小提琴的评论，如果你也想摆脱多余的＆LT无球员消息的替代; TR NG秀=...＆GT;＆LT ; / TR＆GT;

There is also an alternative for the "No players" message commented in the fiddle if you want to also get rid of the extra <tr ng-show="..."></tr>.

编辑：

由于在评论中指出，在AngularJS 1.2+现在可以使用 NG-重复启动和 NG-重复端来解决这个问题。

As pointed in the comments, in AngularJS 1.2+ you can now use ng-repeat-start and ng-repeat-end to solve this problem.

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

Jossef Harush provided a fiddle: http://jsfiddle.net/3yamebfw/

这篇关于在与角NG重复呈现表行推的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！