CODEWITHSUNDEEP
javascriptangularjs
David Addoteye
David Addoteye

Reputation: 1641

Auto numbering of Angularjs ng-repeat list

I am creating student report list with Angularjs ng-repeat. My issue if how i can dynamically appending numbering like ordered-list to the generated list in view. I want to achieve something like this

 # | Name of student | Student ID
 _________________________________
 1 | Samuel Addo     | 346578
 2 | GRace Asumani   | 965433
 3 | Zein Akill      | 123455
 4 | David Addoteye  | 678543

The '#' column should be auto generate when rendering the model in view through ng-repeat. Honestly I don't know where to start cos i don't know how to do it. I will be glad if anyone can help me or point me to the right source. Thank you.

Upvotes: 15

Views: 25091

Answers (2)

TechnoCrat
TechnoCrat

Reputation: 708

Yes you can use {{$index}} to print index position for serial no inside ng-repeat.

Various other variables also available for calculation and check for first, middle, last, odd, even using $first, $middle, $last, $odd and $even respectively.

  • $index: iterator offset of the repeated element (0..length-1)
  • $first: true if the repeated element is first in the iterator.
  • $middle: true if the repeated element is between the first and last in the iterator.
  • $last: true if the repeated element is last in the iterator.
  • $even: true if the iterator position $index is even (otherwise false).
  • $odd: true if the iterator position $index is odd (otherwise false).

Upvotes: 4

juunas
juunas

Reputation: 58823

Inside ng-repeat, you can use:

{{$index +1}}

So for example:

<tr ng-repeat="student in students">
  <td>#{{$index + 1}}</td>
  <td>{{student.name}}</td>
</tr>

$index is a variable provided by the ng-repeat directive which gives you the current index. Here I added 1 to it so that the numbers start from 1 instead of 0. ng-repeat documentation

Upvotes: 62

Related Questions