Angularjs 如何在特定表格行下方显示扩展优惠？

我有这个表格。我有每一行的详细信息，我的想法是当用户单击该详细信息时，在该行下面花费另一行，但问题是它总是在页面底部展开。我需要在我单击的特定行下面展开。有什么建议吗？这是我对该表的html：

<div class="table-layout clean-table">
    <table class="table responsive-table">
        <thead>
            <tr>
                <th>@Translator.Translate("STATUS")</th>
                <th>@Translator.Translate("ID_TICKET_NUMBER")</th>
                <th>@Translator.Translate("TICKET_TIME")</th>
                <th>@Translator.Translate("PAYIN_AMOUNT")</th>
                <th>@Translator.Translate("PAYOUT_AMOUNT")</th>
                <th>@Translator.Translate("TICKET_DETAIL")</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="tickets in GetAllTickets">
                <th><img ng-src="~/Content/img/Icons/{{tickets.Status | lowercase}}.png" /></th>
                <th>{{tickets.Pin}}</th>
                <th>{{tickets.TimeCreated |  date: 'dd.MM.yyyy - hh:mm:ss'}}</th>
                <th>{{tickets.PayIn}}</th>
                <th>{{tickets.PayoutAmount}}</th>
                <th><button class="details" ng-click="toggleExpandOffer($event);PinTicketSearch(tickets.Pin)"></button></th>

            </tr>
            <!--extended-->
            <tr class="extended-offer-container-row" ng-class=" {'expanded':isExpanded}">
                <th colspan="14">
                    <div ng-slide-down="isExpanded" duration="0.3" lazy-render>
                        <table class="offer-table-extended">

                            <tbody>
                                <tr>
                                    <td>
                                        <table>
                                            <tr>
                                                <td class="popup-text">@Translator.Translate("DATE"):</td>
                                                <td class="white">{{ TicketDetail != null ? TicketDetail.BettingSlipResult.TicketHolder.Date : TopTicket.TimeCreated }} {{ TicketDetail != null ? TicketDetail.BettingSlipResult.TicketHolder.Time : '' }}</td>

                                            </tr>
                                            <tr>
                                                <td class="popup-text">
                                                    @Translator.Translate("GAME_TYPE"):
                                                </td>
                                                <td class="white">{{ TicketDetail != null ? TicketDetail.BettingSlipResult.TicketHolder.GameType : TopTicket.GameType }}</td>
                                            </tr>

                                        </table>
                                    </td>

                                </tr>


                                <div ng-if="TicketDetail.BettingSlipResult.TicketHolder.BingoBets.length >= 1">
                                    <table class="ticket-table" border="0" cellpadding="0" cellspacing="0">
                                        <thead>
                                            <tr>
                                                <th class="text-center">@Translator.Translate("PICK")</th>
                                                <th class="text-center">@Translator.Translate("ROUND_NUMBER")</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr ng-repeat="a in TicketDetail.BettingSlipResult.TicketHolder.BingoBets">
                                                <td>{{a.Pick}}</td>
                                                <td>{{a.RoundNumber}}</td>

                                            </tr>
                                        </tbody>
                                    </table>
                                </div>


                            </tbody>
                        </table>
                    </div>

            </tr>

        </tbody>

    </table>


</div>

@翻译（“状态”）
@翻译（“身份证号码”）
@翻译（“票务时间”）
@翻译（“支付金额”）
@翻译（“支付金额”）
@翻译（“车票详细信息”）
{{tickets.Pin}}
{{tickets.TimeCreated}日期：'dd.MM.yyyy-hh:MM:ss'}
{{tickets.PayIn}
{{tickets.payotamount}}
@译者：翻译（“日期”）：
{{TicketDetail！=null？TicketDetail.BettingSlipResult.TicketHolder.Date:TopTicket.TimeCreated}{{TicketDetail！=null？TicketDetail.BettingSlipResult.TicketHolder.Time:'}
@翻译（“游戏类型”）：
{{TicketDetail！=null？TicketDetail.BettingSlipResult.TicketHolder.GameType:TopTicket.GameType}
@Translator.Translate（“选择”）
@译者：翻译（“整数”）
{{a.Pick}}
{{a.RoundNumber}}

您可以将ng repeat移动到tbody元素而不是tr元素：

<tbody ng-repeat="tickets in GetAllTickets">

---

将有多个tbody元素，但这是有效的html。由于将有多个扩展的

，而不是现在的一个，因此您可以将其更新为引用

票证

，该票证现在在其范围内。

使用ng repeat start（对于“正常”行）和ng repeat end（对于扩展行）：。因此，每个项目将有2行，您可以根据展开的项目选择是否显示第二行。部分问题在于

BettingSlipResult div

需要位于表格单元格中，或者完全在

之外。@JBNizet所以我需要这个ng repeat start的指令吗？@ParrisVarney我修复了这个问题。.tnx:）@None不。这个指令存在，我给了你它的文档的直接链接，其中还包含一个示例。阅读它。当我移动ng时，当我单击一行时重复到…它们都打开。你需要使用ng显示，以便只显示一行。