我有这个表.我有关于每一行的详细信息,我的想法是当用户点击该详细信息以在该行下方消耗另一行但问题是它总是在页面底部扩展.我需要扩展到特定行下面我click.Any建议？这是我对该表的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>
解决方法
您可以将ng-repeat移动到tbody元素而不是tr元素：
<tbody ng-repeat="tickets in GetAllTickets">
将有多个tbody元素,但这是有效的html.由于将有多个扩展的< tr class =“extended-offer-container-row”ng-class =“{'expanded'：isExpanded}”>而不是现在的那个,您可以更新它以引用现在在其范围内的票证.
