angularjs - 如何在特定表格行下方显示扩展报价？

Question

我有这张表。我在每一行都有详细信息，我的想法是当用户单击该详细信息以在该行下方扩展另一行时，但问题是它总是在页面底部展开。我需要在特定行下方展开我点击。有什么建议吗？这是该表的 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>

Answer 1

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

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

将有多个 tbody 元素，但这是有效的 html。由于会有多个扩展 <tr class="extended-offer-container-row" ng-class=" {'expanded':isExpanded}">而不是现在，您可以将其更新为引用 tickets现在在它的范围内。