In this article I will explain with an example, how to use the $index variable of ng-repeat directive in AngularJS.
The $index variable is used to get the Index of an item repeated using ng-repeat directive in AngularJS.
This article will explain how to use the $index of the row of HTML Table populated using ng-repeat directive in following two scenarios.
1. Get the Index inside the HTML Table cell using AngularJS.
2. Get the Index when Button within the HTML Table row is clicked using AngularJS.
 
 
Get Row Index of HTML Table Row using AngularJS
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Note: If you want to learn more about these directives please refer my article Introduction to AngularJS.
 
The HTML DIV consists of an HTML Table which will be populated from JSON array using ng-repeat directive.
The first cell of the HTML Table row consists of the $index variable, thus it displays the row index of the respective HTML Table Row.
Note: The $index variable is used to get the Index of the Row created by ng-repeat directive.
 
Each row of the HTML Table consists of a Button which has been assigned ng-click directive. The $index variable is passed as parameter to the GetRowIndex function.
Note: If you want to learn more about ng-click directive, please refer my article ng-click directive example.
 
Populating the HTML Table
An array of JSON objects is created and assigned to the Customers JSON array.
The ng-repeat directive as the name suggests repeats the element based on the length of the collection, in this scenario it will repeat the TR element (HTML Table Row).
The TBODY element of the HTML Table has been assigned ng-repeat directive in order to iterate through all the items of the Customers JSON array.
For each JSON object in the Customers JSON array, a TR element (HTML Table Row) is generated and appended into the HTML Table.
 
Getting the Row Index of the HTML Table row on Button click
When the Button is clicked, the GetRowIndex function of the Controller gets called. Inside the GetRowIndex function, the value of the Row Index of the HTML Table row is fetched as parameter.
Finally the Row Index of the HTML Table row is displayed using JavaScript Alert Message Box.
Note: If you want to learn more on displaying JavaScript alert with AngularJS, please refer my article AngularJS: Display (Show) JavaScript Alert box.
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        table
        {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
        table th
        {
            background-color: #F7F7F7;
            color: #333;
            font-weight: bold;
        }
        table th, table td
        {
            padding: 5px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $window) {
           $scope.Customers = [
                { Name: "John Hammond", Country: "United States" },
                { Name: "Mudassar Khan", Country: "India" },
                { Name: "Suzanne Mathews", Country: "France" },
                { Name: "Robert Schidner", Country: "Russia" }
               ];
            $scope.GetRowIndex = function (index) {
                $window.alert("Row Index: " + index);
            };
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th>Index</th>
                <th>Name</th>
                <th>Country</th>
                <th></th>
            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>
                    <td>{{$index}}</td>
                    <td>{{m.Name}}</td>
                    <td>{{m.Country}}</td>
                    <td>
                        <input type="button" value="Get Row Index" ng-click="GetRowIndex($index)" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
 
 
Screenshot
AngularJS ng-repeat $index example: Get Index using $index in ng-repeat using AngularJS
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code