Ng-Class-6

 

In this index class will apply to those element where index value is equal to row value.When we click on the any element it calls the selectedRow() function in which index value is assign to row variable.

 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Welcome to LearnKode - A code learning platform</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: gray; } </style> </head> <body ng-app="switchExample"> <div ng-controller="ExampleController"> <div class="container"> <table> <thead> <tr>Click on course to apply class.</tr> <tr ng-repeat="Arr in Arrs"> <th ng-class="{index:$index==row}" ng-click="selectedRow($index)"> {{Arr.name}} </th> </tr> </thead> </table> </div> </div> <script> var app = angular.module("switchExample", []); app.controller('ExampleController', ['$scope', function ($scope) { $scope.Arrs = [{ name: "Angular" }, { name: "Jquery" }, { name: "JavaScript" }, { name: "Bootstrap" }]; $scope.selectedRow = function (index) { $scope.row = index; }; }]); </script> </body> </html>
Output