Geek Answers Handbook

Auto Serial Numbers in ng-Repeat (Angular)

I use ng-Repeat to populate the table with data in the Controller (or from Services). However, I need to fully populate Serial Nos in the first column automatically. Currently, I only get static data as 1 in all columns.

HTML:

<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <table> <tr><th>S.No.</th><th>Name</th></tr> <tr ng-repeat="x in People"><td>1</td><td>{{x.name}}</td></tr> </table> <script> var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope){ $scope.People = [ {name:"Peter"}, {name:"Lina"}, {name:"Roger"} ]; }); </script> </body> </html>

EXIT:

enter image description here

I want the numbers in the first column to be 1, 2, 3, etc. How can I achieve this with ngRepeat?

+1
javascript angularjs angularjs-ng-repeat
source share
2 answers

Use $index :

 <td>{{$index + 1}}</td> <td>{{x.name}}</td>
+3
source share

There are two ways to get the index for a given array in ng-repeat

Using $ index

 <th ng-repeat="n in [].constructor(3 + 1) track by $index">{{$index}}</th>

Counter usage

This method is useful when you have ng-repeat nested and you need counters for both loops ... the following example uses a counter string. Although a track by index $ is required, it is not used for logic.

 <tr ng-repeat="(row, y) in getNumber(h.seats.length, 3) track by $index"> <td>{{row+1}}</td>
+1
source share

More articles:


All Articles