这是在 ng-repeat 指令中生成座位的 html。 ng-class 已用于在选择座位时添加颜色。但它不起作用。
您可以在 JSfiddle 中看到我的代码及以下:
<body class="text-center" ng-app="movieApp" ng-controller="movieController">
<div id="content"> <span>
Name: <input type="text" ng-model="name" required>
Number of Seats: <input type="text" ng-model="seat" required>
</span>
</div>
<div id="button">
<button ng-click="Select()">Start Selecting</button>
</div>
<div ng-if="selected">
<div>Row A
<span ng-repeat="value in values" ng-class="{ 'selected-class-name': $event == selectedIndex }" ng-click="SeatSelected($event)">
<input type="button" id={{"A"+value}} >
</span>
</div>
<div>Row B
<span ng-repeat="value in values" ng-class="{'selected':$event = selectedRow}" ng-click="SeatSelected($event)">
<input type="button" id={{"B"+value}} >
</span>
</div>
<div>Row C
<span ng-repeat="value in values" ng-class="{'selected':$event = selectedRow}" ng-click="SeatSelected($event)">
<input type="button" id={{"C"+value}} >
</span>
</div>
<div>Row D
<span ng-repeat="value in values" ng-class="{'selected':$event = selectedRow}" ng-click="SeatSelected($event)">
<input type="button" id={{"A"+value}} >
</span>
</div>
<button ng-click=Confirm()>Confirm Selection</button>
<div ng-if="confirmed" class="text-center">Create a Table
<table>
<tr>
<th ng-repeat="header in headers">{{header.name}}</th>
</tr>
<tr ng-repeat="row in data">
<td>{{row.name}}</td>
<td>{{row.seat}}</td>
<td>{{row.seatSelected}}</td>
</tr>
</table>
</div>
</div>
</body>
最佳答案
检查这个 fiddle :
我在点击座位时添加了 angular.element(event.toElement).toggleClass('selected');，对我来说效果很好。
希望对您有所帮助。
关于css - 单击按钮时，我正在尝试为按钮添加颜色。按钮在 ng-repeat 下，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32310216/