Automatic Serial Nos in ng-Repeat (Angular)

Question

I am using ng-Repeat to fill the table with data in Controller (or from Services). However, I need to fullfill Serial Nos in first column automatically. Currently I am getting only 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>

OUTPUT:

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

Tarun Dugar · Accepted Answer · 2016-01-28 09:19:15Z

3

Use $index:

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

answered Jan 28, 2016 at 9:19

Tarun Dugar

8,9938 gold badges50 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sacky San · Accepted Answer · 2016-02-22 23:42:32Z

1

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

Using $index

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

Using a counter

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

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

answered Feb 22, 2016 at 23:42

Sacky San

1,68223 silver badges26 bronze badges

Collectives™ on Stack Overflow

Automatic Serial Nos in ng-Repeat (Angular)

2 Answers 2

Comments

Using $index

Using a counter

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Using $index

Using a counter

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related