如何在角度js中的一行内显示行答案

【问题标题】：How to display row inside a row in angular js如何在角度js中的一行内显示行
【发布时间】：2015-07-25 23:02:01
【问题描述】：

我正在尝试使用 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>

第二个表格会显示座位布局，但我想将此布局添加到点击的行。

【问题讨论】：

所以将第二个ng-repeat 表放在第一个表中？然后使用ng-show 显示/隐藏它。不过请不要使用表格，我猜这就是你不想嵌套它们的原因......
如果我将第二个 ng-repeat 放在第一个里面，那么相同的座位布局将添加到所有父行，并且很难获得点击了哪个座位
发表回答澄清

标签： javascript jquery html css angularjs

【解决方案1】：

首先，跳过表格。没有理由在这里使用它们。其次，使您的seats 成为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>

您当然必须重构您的数据模型并适当地设置所有内容。但是，如果您使用的是简单的数据模型，那么您就会知道您将相对简单的事情过度复杂化了多少。

【讨论】：