我试图在单击按钮时为按钮添加颜色。按钮处于ng-repeat下

时间:2015-08-31 11:31:08

标签: css angularjs ng-repeat ng-class

这是在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>

1 个答案:

答案 0 :(得分:0)

检查这个小提琴:

http://jsfiddle.net/hv9ssxuf/

我在座位点击时添加了angular.element(event.toElement).toggleClass('selected');,对我来说效果很好。

希望它有所帮助。