ngClass directive

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.
<!doctype html>
<html ng-app="parking">
<script src="angular.js"></script>
var parking = angular.module("parking", []);
parking.controller("parkingCtrl", function($scope) {
$scope.appTitle = "Parking";
$ = [];
$scope.park = function(car) {
car.entrance = new Date();
delete $;
.selected {
background-color: #FAFAD2;
<body ng-controller="parkingCtrl">
<h3 ng-bind="appTitle"></h3>
<tbody> Creating Reusable Components with Directives [ 28 ]
<tr ng-class="{selected: car.selected}" ng-repeat="car in cars">
<input type="checkbox" ngmodel="car.selected" />
<td><span ng-bind="car.plate"></span></td>
<td><span ng-bind="car.entrance"></span></td>
<input type="text" ng-model="car.plate" placeholder="What's the plate?" />
<button ng-click="park(car)" ng-disabled="!car.plate">
Related Tutorial
Follow Us #
Contents +