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. If the expression inside the ng-class directive returns true then only the class is added else it is not added. It is supported by all HTML elements.
Syntax:
<element ng-class="expression"> Contents... </element>
Example 1: This example uses ng-class Directive to set and reset CSS class.
<!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> <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> |
Output:
Before Clicking the button:
After Clicking the style button:
Example 2: This example uses ng-class Directive to set the CSS style to the class.
<!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> <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> |
Output:
Before Selecting the element:
After Selecting the element:
