Question

我正在尝试在ng-repeat中的事件中为每个事件添加第二行（<tr>）。但是，它最后只添加了一行，我需要每个新行（class =“info”）与其他每一行都使用rel属性。

信息行中的单元格将通过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属性（解释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>

AngularJS ng-repeat双行

1 个答案: