Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 596
David Addoteye Avatar asked Mar 17 '15 05:03

David Addoteye


People also ask

How do you condition in NG-repeat?

You can add condition using ng-if also and this is effective too. You can apply any condition to your list using ng-if attribute. In below example, I have put condition where Age > 20 and IsActive is true. ng-repeat will fetch all records which full fill this scenario.

What is the use of NG-repeat in AngularJS?

AngularJS ng-repeat Directive The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object.

What is $Index in AngularJS?

Stay on the bleeding edge of your favorite technologies. $index is a way to show which iteration of a loop you're in. If we set up an ng-repeat to repeat over the letters in 'somewords', like so: <div ng-app="app"> <div ng-repeat="item in 'somewords'.split('')"> {{$index + 1}}.


2 Answers

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

like image 66
juunas Avatar answered Oct 17 '22 07:10

juunas


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).
like image 42
TechnoCrat Avatar answered Oct 17 '22 05:10

TechnoCrat