The
ngClass directive is used every time you need to dynamically apply a class to an element by providing the name of the class in a data-binding expression.
The following code shows the application of the
ngClass directive.
index.html
snippet
<!doctype html>
<html ng-app="parking">
<head>
<title>Parking</title>
<script src="angular.js"></script>
<script>
var parking = angular.module("parking", []);
parking.controller("parkingCtrl", function($scope) {
$scope.appTitle = "Parking";
$scope.cars = [];
$scope.park = function(car) {
car.entrance = new Date();
$scope.cars.push(car);
delete $scope.car;
};
});
</script>
<style>
.selected {
background-color: #FAFAD2;
}
</style>
</head>
<body ng-controller="parkingCtrl">
<h3 ng-bind="appTitle"></h3>
<table>
<thead>
<tr>
<th></th>
<th>Plate</th>
<th>Entrance</th>
</tr>
</thead>
<tbody>
www.it-ebooks.info Creating Reusable Components with Directives [ 28 ]
<tr ng-class="{selected: car.selected}" ng-repeat="car in cars">
<td>
<input type="checkbox" ngmodel="car.selected" />
</td>
<td><span ng-bind="car.plate"></span></td>
<td><span ng-bind="car.entrance"></span></td>
</tr>
</tbody>
</table>
<input type="text" ng-model="car.plate" placeholder="What's the plate?" />
<button ng-click="park(car)" ng-disabled="!car.plate">
Park
</button>
</body>
</html>
