AngularJS ng-repeat双行

发布时间：2020-12-17 17:55:45 所属栏目：安全来源：网络整理

导读：我正在尝试在ng-repeat中的事件中为每个事件添加第二行( tr).但是,它只在最后添加了一行,我需要每个新行(class =“info”)使用rel属性在每个其他行之间进行BETWEEN. 信息行中的单元格将通过ajax填充并在单击“详细信息”链接时切换,然后在单击“关闭”链接时

我正在尝试在ng-repeat中的事件中为每个事件添加第二行(< tr>).但是,它只在最后添加了一行,我需要每个新行(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>

解决方法

您需要使用特殊的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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!