Please enable Javascript to correctly display the contents on Dot Net Tricks!

Understanding ng-repeat special variables

  Author : Shailendra Chauhan
Posted On : 30 Dec 2014
Total Views : 11,621   
Updated On : 26 Sep 2016
 

The ng-repeat directive has a set of special variables which you are useful while iterating the collection. These variables are as follows:

  1. $index

  2. $first

  3. $middle

  4. $last

The $index contains the index of the element being iterated. The $first, $middle and $last returns a boolean value depending on whether the current item is the first, middle or last element in the collection being iterated.

<html>
<head>
 <title></title>
 <script src="lib/angular.js"></script>
 <script>
 var app = angular.module("app", []);

 app.controller("ctrl", function ($scope) {
 $scope.friends = [{ name: 'shailendra', gender: 'boy' },
 { name: 'kiran', gender: 'girl' },
 { name: 'deepak', gender: 'boy' },
 { name: 'pooja', gender: 'girl' }];
 });
 </script>
</head>
<body ng-app="app">
 <div ng-controller="ctrl">
 <ul class="example-animate-container">
 <li ng-repeat="friend in friends">
 <div>
 [{{$index + 1}}] {{friend.name}} is a {{friend.gender}}.

 <span ng-if="$first">
 <strong>(first element found)</strong>
 </span>
 <span ng-if="$middle">
 <strong>(middle element found)</strong>
 </span>
 <span ng-if="$last">
 <strong>(last element found)</strong>
 </span>
 </div>
 </li>
 </ul>
 </div>
</body>
</html>

How it works..

What do you think?

I hope you will enjoy the ng-repeat directives special variables in AngularJS while developing your app with AngularJS. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.



Free Interview Books
 
COMMENTS (0)
6 JUL
ASP.NET Core with Angular4 Development (Online)

7:00 AM-9:00AM IST(+5:30 GMT)T/T

Know More
5 JUL
NodeJS with Angular4 Development (Online)

08:00 PM-09:30 PM IST(+5.30 GMT)M/W/F

Know More
1 JUL
ASP.NET MVC with Angular4 Development (Online)

03:30 PM-05:30 PM IST(+5.30 GMT) Weekend

Know More
1 JUL
ASP.NET MVC with Angular4 Development (Classroom)

8:00 AM-10:00 AM Weekend

Know More
1 JUL
ASP.NET Core with Angular4 Development (Classroom)

3:00PM 5:00PM Weekend

Know More
1 JUL
Xamarin Forms : Build Cross-platform Apps (Classroom)

3:00 PM 5:00 PM Weekend

Know More
1 JUL
MEAN Stack 2 Development (Classroom)

11:00 AM-12:30 PM Weekend

Know More
30 JUN
ASP.NET MVC with Angular4 Development (Online)

07:00 AM-09:00 AM IST(+5.30 GMT) MON/WED/FRI

Know More
29 JUN
Hadoop Development cum Administration (Online)

7:00 AM-9:00AM IST(+5:30 GMT)T/W/T

Know More
26 JUN
Xamarin Forms : Build Cross-platform Apps (Online)

9:30PM- 11:00PM IST(+5:30GMT) M/W/F

Know More
26 JUN
Xamarin Forms : Build Cross-platform Apps (Online)

9:30PM- 11:00PM IST(+5:30GMT) M/W/F

6 JUN
ASP.NET MVC with Angular4 Development (Online)

09:00 PM-11:00 PM IST(+5.30 GMT)(TT)

3 JUN
ASP.NET MVC with Angular4 Development (Classroom)

4:00 PM-5:30 PM Weekend

20 MAY
Angular2 and Angular4 Development (Online)

08:00 AM-10:00 AM IST(+5.30 GMT) Weekend

20 MAY
NodeJS with Angular4 Development (Classroom)

5:30 PM-7:00 PM Weekend

8 MAY
ASP.NET MVC with Angular4 Development (Online)

07:00 AM-09:00 AM IST(+5:30 GMT) M/W/F

2 MAY
ASP.NET Core Development (Online)

07:00 AM - 09:00 AM IST( TUS, THR)

29 APR
ASP.NET MVC with Angular2 Development (Classroom)

9:30 AM-11:00 AM

BROWSE BY CATEGORY
 
 
LIKE US ON FACEBOOK
 
+