Post
Ask Question

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

  1. <h4>Simple ngRepeat Example</h4>  
  2. <div ng-controller="HelloController">  
  3.     <label>List of employee Name</label>  
  4.     <br />  
  5.     <ul>  
  6.         <li ng-repeat="x in names"> {{ x }} </li>  
  7.     </ul>  
  8. </div>  
Controller
  1. var app = angular.module("app", []);  
  2. app.controller("HelloController", function($scope)  
  3. {  
  4.     $scope.names = ['Tejas', 'Jignesh', 'Rakesh'];  
  5. });  
Output

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
    1. <h4>$index Example</h4>  
    2. <div ng-controller="HelloController">  
    3.     <label>List of employee Name</label>  
    4.     <br />  
    5.     <div>  
    6.         <div ng-repeat="x in names track by $index"> {{$index + 1}}) {{ x }} </div>  
    7.     </div>  
    8. </div>  
    Controller code is same as previous example.

    Output

    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
    1. <h4>$first Example</h4>  
    2. <div ng-controller="HelloController">  
    3.     <label>List of employee Name</label>  
    4.     <br />  
    5.     <div>  
    6.         <div ng-repeat="x in names" ng-show="!$first"> {{$index + 1}}) {{ x }} </div>  
    7.     </div>  
    8. </div>  
    Output

    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
    1. <h4>$middle Example</h4>  
    2. <div ng-controller="HelloController">  
    3.     <label>List of employee Name</label>  
    4.     <br />  
    5.     <div>  
    6.         <div ng-repeat="x in names" ng-show="!$middle"> {{$index + 1}}) {{ x }} </div>  
    7.     </div>  
    8. </div>  
    Output

    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.
    1. <h4>$last Example</h4>  
    2. <div ng-controller="HelloController">  
    3.     <label>List of employee Name</label>  
    4.     <br />  
    5.     <div>  
    6.         <div ng-repeat="x in names" ng-show="!$last"> {{$index + 1}}) {{ x }} </div>  
    7.     </div>  
    8. </div>  
    output

  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,
    1. <h4>$even Example</h4>  
    2. <div ng-controller="HelloController">  
    3.     <label>List of employee Name</label>  
    4.     <br />  
    5.     <div>  
    6.         <div ng-repeat="x in names" ng-show="!$even"> {{$index + 1}}) {{ x }} </div>  
    7.     </div>  
    8. </div>  
    Output

    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
    1. <h4>$odd Example</h4>  
    2. <div ng-controller="HelloController">  
    3.     <label>List of employee Name</label>  
    4.     <br />  
    5.     <div>  
    6.         <div ng-repeat="x in names" ng-show="!$odd"> {{$index + 1}}) {{ x }} </div>  
    7.     </div>  
    8. </div>  
    Output

    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


Similar Articles