La directiva ng-class en AngularJS se usa para especificar las clases CSS en elementos HTML. Se utiliza para enlazar dinámicamente clases en un elemento HTML. Si la expresión dentro de la directiva ng-class devuelve verdadero, solo se agrega la clase; de lo contrario, no se agrega. Es compatible con todos los elementos HTML.
Sintaxis:
<element ng-class="expression"> Contents... </element>
Ejemplo 1: este ejemplo utiliza la directiva ng-class para establecer y restablecer la clase CSS.
<!DOCTYPE html>
<html>
<head>
<title>ng-class Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
</script>
<style>
.edit {
color: green;
font-size: 1.5em;
}
</style>
</head>
<body ng-app="" style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-class Directive</h2>
<div>
<input type="button" ng-click="edit=true" value="Style" />
<input type="button" ng-click="edit=false" value="Reset" />
<br><br>
<span ng-class="{true:'edit'}[edit]">
GeeksforGeeks
</span>
is the computer science portal for geeks.
</div>
</body>
</html>
Salida:
Antes de hacer clic en el botón: 
Después de hacer clic en el botón de estilo:
Ejemplo 2: este ejemplo usa la directiva ng-class para establecer el estilo CSS en la clase.
<!DOCTYPE html>
<html>
<head>
<title>ng-class Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
</script>
<style type="text/css">
.index {
color: white;
background-color: green;
}
</style>
</head>
<body ng-app="app" style="padding:20px">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-class Directive</h2>
<div ng-controller="geek">
<table>
<thead>
<th>Select any sorting technique:</th>
<tr ng-repeat="i in sort">
<td ng-class="{index:$index==row}"
ng-click="sel($index)">
{{i.name}}
</td>
</tr>
</thead>
</table>
</div>
<script>
var app = angular.module("app", []);
app.controller('geek', ['$scope', function ($scope) {
$scope.sort = [
{ name: "Merge sort" },
{ name: "Quick sort" },
{ name: "Bubble sort" }
];
$scope.sel = function (index) {
$scope.row = index;
};
}]);
</script>
</body>
</html>
Salida:
Antes de seleccionar el elemento: 
Después de seleccionar el elemento:
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA