Understanding ngRepeat Directive In AngularJS

Introduction

The ngRepeat directive repeats a template once per item in collection. In other words it is very useful for repeats on an HTML element. Here each template has their own scope in which given loop variable is set to the current collection item. It has special set of variables Properties which can be useful while iterating the collection.

Example

The following code snippet demonstrations the simple example of ngRepeat directive.

HTML

<h4>Simple ngRepeat Example</h4>
<div ng-controller="HelloController">
    <label>List of employee Name</label>
    <br />
    <ul>
        <li ng-repeat="x in names"> {{ x }} </li>
    </ul>
</div>

Controller

var app = angular.module("app", []);
app.controller("HelloController", function($scope)
{
    $scope.names = ['Tejas', 'Jignesh', 'Rakesh'];
});

Output



ngRepeat special variables/properties are the following,

1. $index
   
   $index is number type. This iterator offset of the repeated element from zero (0) to (length-1). $index shows which iteration of a loop we are in. We may also track items by the index of each item in the collection, using the $index. If we do not have a unique identifier, track by $index can provide a performance boost.
   
   Example
   
   HTML
   

   <h4>$index Example</h4>
   <div ng-controller="HelloController">
       <label>List of employee Name</label>
       <br />
       <div>
           <div ng-repeat="x in names track by $index"> {{$index + 1}}) {{ x }} </div>
       </div>
   </div>

   Controller code is same as previous example.
   
   Output
   
   
   
   
2. $first
   
   It is Boolean type. This returns true if the repeated element is first in the iterator.
   
   Example:
   
   The following code snippet used to hide first element of array.
   
   HTML
   

   <h4>$first Example</h4>
   <div ng-controller="HelloController">
       <label>List of employee Name</label>
       <br />
       <div>
           <div ng-repeat="x in names" ng-show="!$first"> {{$index + 1}}) {{ x }} </div>
       </div>
   </div>

   Output
   
   
   
   
3. $middle
   
   It is Boolean type. This returns true if the repeated element is between the first and last in the iterator.
   
   Example
   
   The following code snippet is used to hide first element of array.
   
   HTML
   

   <h4>$middle Example</h4>
   <div ng-controller="HelloController">
       <label>List of employee Name</label>
       <br />
       <div>
           <div ng-repeat="x in names" ng-show="!$middle"> {{$index + 1}}) {{ x }} </div>
       </div>
   </div>

   Output
   
   
   
   
4. $last
   
   It is Boolean type. This returns true if the repeated element is last in the iterator.
   
   Example:
   
   The following code snippet is used to hide last element of array.
   

   <h4>$last Example</h4>
   <div ng-controller="HelloController">
       <label>List of employee Name</label>
       <br />
       <div>
           <div ng-repeat="x in names" ng-show="!$last"> {{$index + 1}}) {{ x }} </div>
       </div>
   </div>

   
   
   
5. $even
   
   It is Boolean type. This returns true if the iterator position $index is even else return false.
   
   Example:
   
   The following code snippet is used to hide even index element of array,
   

   <h4>$even Example</h4>
   <div ng-controller="HelloController">
       <label>List of employee Name</label>
       <br />
       <div>
           <div ng-repeat="x in names" ng-show="!$even"> {{$index + 1}}) {{ x }} </div>
       </div>
   </div>

   Output
   
   
   
   
6. $odd
   
   It is Boolean type. This returns true if the iterator position $index is odd else return false.
   
   Example:
   
   The following code snippet is used to hide odd index element of array.
   
   HTML
   

   <h4>$odd Example</h4>
   <div ng-controller="HelloController">
       <label>List of employee Name</label>
       <br />
       <div>
           <div ng-repeat="x in names" ng-show="!$odd"> {{$index + 1}}) {{ x }} </div>
       </div>
   </div>

   Output
   
   
   

Summary

This article will help you to learn ng-repeat directive in AngularJS. It has a set of special variables/properties that is useful in iterating the collection.

References

• ngRepeat