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，您可以将其更新为引用现在位于其范围内的Android.mk。

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

1 个答案: