Understanding ng-repeat special variables

Shailendra Chauhan  Print   1 min read  
30 Dec 2014
09 Aug 2018
Intermediate
16.2K

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.

Take our free skill tests to evaluate your skill!

In less than 5 minutes, with our skill test, you can identify your knowledge gaps and strengths.

Learn to Crack Your Technical Interview

+
+
Accept cookies and close this message