AngularJS ng-repeat 双行

Question

我试图在下面的代码中为 ng-repeat 中的事件中的每个事件添加第二行( <tr> )。但是，它最后只添加了一行，我需要每个新行 (class="info") 位于具有 rel 属性的其他每一行之间。

info 行中的单元格将通过 ajax 填充并在单击 Details 链接时切换，然后在单击 Close 链接时再次切换(Details 更改为 Close)。它的工作原理类似于这个 fiddle :http://jsfiddle.net/Mrbaseball34/btwa7/

我将如何在 AngularJS 中做到这一点？

<tbody id="events_tbody">
    <tr ng-repeat="event in events" rel="{{event.EVE_EVENT_CODE}}">
        <td>{{event.COURSE_TYPE}}</td>
        <td>{{event.EVE_FORMAL_DATE}}</td>
        <td>{{event.EVE_DESCRIPTION}}</td>
        <td>{{event.PRICE | dollars}}</td>
        <td class="nb">
            <a href="#">Details</a>
        </td>
    </tr>
    <!-- Now add Details row: -->
    <tr class="info" style="display:none;">
        <td colspan="5" id="info_{{event.EVE_EVENT_CODE}}"></td>
    </tr>
</tbody>

Answer 1

您需要使用特殊的 ng-repeat-start 和 ng-repeat-end 属性(解释为 here ):

<tbody id="events_tbody">
    <tr ng-repeat-start="event in events" rel="{{event.EVE_EVENT_CODE}}">
        <td>{{event.COURSE_TYPE}}</td>
        <td>{{event.EVE_FORMAL_DATE}}</td>
        <td>{{event.EVE_DESCRIPTION}}</td>
        <td>{{event.PRICE | dollars}}</td>
        <td class="nb">
            <a href="#">Details</a>
        </td>
    </tr>
    <!-- Now add Details row: -->
    <tr ng-repeat-end class="info" style="display:none;">
        <td colspan="5" id="info_{{event.EVE_EVENT_CODE}}"></td>
    </tr>
</tbody>