我正在尝试使用 Angular JS 设计旅行页面，但我陷入了显示座位布局的困境。
每当我单击“显示详细信息”时，我都想在单击的行下显示座位布局。我如何实现这一目标？
我的代码:
<html ng-app="searchResults">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<style>
td{text-align:center;}
.animate.ng-enter, .animate.ng-leave {
transition: 500ms ease-in all;
position: relative;
display: block;
}
.animate.ng-enter.ng-enter-active, .animate.ng-leave {
left: 0;
}
.animate.ng-leave.ng-leave-active, .animate.ng-enter {
left: 500px;
}
</style>
</head>
<body>
<div id="busesDiv" ng-controller="busesController">
<input type="text" ng-model="search"/>
<div style="width:100%;">
<table style="width:100%;" id="myT">
<thead>
<tr>
<th ng-repeat="head in busHeaders">{{ busHeaders[$index]}} </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="bus in buses | filter:search" class="animate">
<td>{{bus.operatorName}}</td>
<td>{{bus.vehicleClass}}</td>
<td>{{bus.amenities}}</td>
<td>{{bus.departureTime}}</td>
<td>{{bus.arrivalTime}}</td>
<td>{{bus.availableSeats}}</td>
<td>{{bus.fare}}</br><button ng-click="showSeatDetails(bus,bus.busServiceId)">Show Details</button></td>
</tr>
</tbody>
</table>
<table class"seatLayoutTable">
<tbody>
<tr ng-repeat="row in totalSeatConfiguration.split(';')">
<td ng-repeat="seat in row.split(',') track by $index">
<span ng-if="bookedSeatsArray.indexOf(seat.split('_')[0].trim())==-1 && ladiesSeatsArray.indexOf(seat.split('_')[0])==-1">
<img src="images/available.png" ng-show="seat.split('_')[0] !='NA'" title="{{seat.split('_')[0]}}"/>
</span>
<span ng-if="bookedSeatsArray.indexOf(seat.split('_')[0])!=-1">
<img src="images/booked.png" ng-show="seat.split('_')[0]!='NA'" title="{{seat.split('_')[0]}}"/>
</span>
<span ng-if="ladiesSeatsArray.indexOf(seat.split('_')[0])!=-1">
<img src="images/ladies.png" ng-show="seat.split('_')[0]!='NA'" title="{{seat.split('_')[0]}}"/>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
第二个表格将显示座位布局，但我想将此布局添加到单击的行。
最佳答案
首先，跳过表格。没有理由在这里使用它们。其次，让您的 seat 成为 bus
<h1 ng-repeat="head in busHeaders">{{ busHeaders[$index]}} </h1>
<div ng-repeat="bus in buses | filter:search" class="bus animate">
<span>{{bus.operatorName}}</span>
<span>{{bus.vehicleClass}}</span>
<span>{{bus.amenities}}</span>
<span>{{bus.departureTime}}</span>
<span>{{bus.arrivalTime}}</span>
<span>{{bus.availableSeats}}</span>
<span>{{bus.fare}}</br>
<button ng-click="bus.showSeats = !bus.showSeats">Show Details</button></span>
<div class="seatLayout" ng-repeat="seat in bus.seats" ng-show="bus.showSeats">
<span ng-show="!seat.booked" ng-click="seat.book()">
<span ng-show="!seat.ladies"><img src="images/available.png"/></span>
<span ng-show="seat.ladies"><img src="images/ladies.png"/></span>
</span>
<span ng-show="seat.booked"><img src="images/booked.png"/></span>
</div>
</div>
您当然必须重构您的数据模型并适本地设置所有内容的样式。但是，如果您使用简单的数据模型，您就会明白您将一些实际上相对简单的事情变得过于复杂了。
关于javascript - 如何在 Angular js中显示行内的行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31625752/