Question

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

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

Answer 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>

个孩子

var people = [
    {id: 1, name: 'Jack'}, 
    {id: 2, name: 'John'}, 
    {id: 3, name: 'Patrick'}
]

var Hello = React.createClass({
    handlePerson: function(id){
        alert(id);
    },
    render: function() {
        var self = this;
        var listPersons = this.props.names.map(function(p){
            return <li onClick={self.handlePerson(p.id)}> {p.name} </li>
        });
        return (
            <ul>
                {listPersons}
            </ul>
        )
    }
});

React.render(<Hello names={people} />, document.getElementById('container'));

您当然必须重构您的数据模型并对所有内容进行适当的设置。但是，如果你使用简单的数据模型，那么你就会明白你有多么过于复杂，而且相对简单。

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

1 个答案: