You're almost there -- Here's an example accomplishing what you want (I think).
index.html (note how we assign the class highlight
to the td
when the checkbox model is true:
<input ng-model="chBeamer" type="checkbox" id="chBeamer" name="chBeamer" />
<label for="chBeamer"><span></span>Beamer</label><br/>
<table id="listTable">
<thead>
<tr>
<th></th>
<th scope="col" abbr="Type">Type</th>
<th scope="col" abbr="Beamer">Beamer</th>
<th scope="col" abbr="Capacity">Capacity</th>
<th scope="col" abbr="Size">Size</th>
<th scope="col" abbr="OpeningHours">Opening hours</th>
<th scope="col" abbr="Actions">Actions</th>
</tr>
</thead>
<tbody ng-repeat="r in c.rooms | filter:{level:levelId}">
<tr>
<th scope="row"><a href="#/CampusOverview/{{c.id}}/{{levelId}}/{{r.roomName}}">{{r.roomName}}</a></th>
<td>{{r.type}}</td>
<td ng-class="{highlight: chBeamer}">{{r.beamer}}</td>
<td>{{r.capacity}}</td>
<td>{{r.size}}</td>
<td>{{r.openingHours}}</td>
<td>{{r.actions.length}}</td>
</tr>
</tbody>
</table>
</body>
</html>
stylesheet:
td {
/* animate background changes on the table cells */
-moz-transition: background 0.25s ease-in-out;
-webkit-transition: background 0.25s ease-in-out;
-ms-transition: background 0.25s ease-in-out;
-o-transition: background 0.25s ease-in-out;
transition: background 0.25s ease-in-out;
}
.highlight {
background: rgba(255, 255, 0, 0.55);
}