AngularJS ng-class Directive
The ng-class Directive in AngularJS is used to specify the CSS classes on HTML elements. It is used to dynamically bind classes on an HTML element. The value for the ng-class has either string, an object, or an array. It must contain more than one class name, which is separated by space, in the case of a string. If it is an object, it will contain the key-value pairs, where the key represents the class name for the class that wants to add & value represent the boolean value. If the expression inside the ng-class directive returns true then only the class is added else it is not added. If the value of ng-class is an array then it can be the combination of both strings as well as an array. It is supported by all HTML elements.
Syntax:
<element ng-class="expression">
Contents...
</element>
Example 1: This example uses the ng-class Directive to set and reset the CSS class.
HTML
<!DOCTYPE html>
< html >
< head >
< title >ng-class Directive</ title >
< script src =
</ script >
< style >
.edit {
color: green;
font-size: 1.5em;
}
</ style >
</ head >
< body ng-app = "" style = "text-align:center" >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< h3 >ng-class Directive</ h3 >
< 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 >
|
Output:
Example 2: This example uses the ng-class Directive to set the CSS style to the class.
HTML
<!DOCTYPE html>
< html >
< head >
< title >ng-class Directive</ title >
< script src =
</ 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 >
< h3 >ng-class Directive</ h3 >
< 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 >
|
Output:
Last Updated :
01 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...