AngularJS ng-repeat双行

Question

我正在尝试<tr>在ng-repeat中的事件中为每个事件添加下面代码中的第二行().但是,它只在最后添加一行,我需要每个新行(class ="info")使用rel属性在其他每个行之间进行BETWEEN.

信息行中的单元格将通过ajax填充并在单击"详细信息"链接时切换,然后在单击"关闭"链接时(详细信息更改为"关闭")将再次切换.它将类似于这个小提琴: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属性(在此解释):

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