Diving deep into ngRepeat directive in AngularJS

December 14, 2015
by Inaam Hussain

If you are creating any web based application using AngularJS, and there are chances that you have to show repeated data based on what you are getting from API’s. For this ng-repeat is very important and useful directive for repeating UI elements.

So in this will see how we can use ng-repeat along with it’s different possible options.

Following properties will be discussed in this tutorial,

  • $index
  • $first
  • $middle
  • $last
  • $even
  • $odd

DEMO  DOWNLOAD

Getting Started

Let’s start with basic ng-repeat. We will use table to show iteration.
So here is our controller in which we call our API and bind data to UI elements.

Simple ng-repeat :

Syntax : ng-repeat = "item in items"

app/app.js
app.controller('listdata',function($scope, $http){
    $scope.details = [];
    $http.get("mockJson/mock.json").success(function(data){
        $scope.details = data;
    });
});

So in above code we simply calling mock json file and then passing that data to $scope.details.
Here is the html file in which will use $scope.details data to show entries.

index.html
<tr ng-repeat="item in details">
    <td>{{item.id}}</td>
    <td>{{item.first_name}}</td>
    <td>{{item.last_name}}</td>
    <td>{{item.email}}</td>
    <td>{{item.country}}</td>
    <td>{{item.ip_address}}</td>
</tr>

So in details we have all the data and that will pass one by one to item and in that item we are showing id, first_name etc.

simple ngRepeat

simple ngRepeat

ng-repeat with key & value :

Syntax : ng-repeat = "(key, value) in items"

We can also use key and value in ng-repeat. So controller code is same as above. we just need to change in html code,

index.html
<tr ng-repeat="(key, value)  in details">
    <td>{{key}}</td>
    <td>{{value.id}}</td>
    <td>{{value.first_name}}</td>
    <td>{{value.last_name}}</td>
    <td>{{value.email}}</td>
    <td>{{value.country}}</td>
    <td>{{value.ip_address}}</td>
</tr>

In above code you can see that we are accessing key and value to show data.

ngRepeat key&value

ngRepeat key&value

$odd in ng-class with ng-repeat :

Syntax : ng-class="{'success':$odd}" ng-repeat = "item in items"

In table if we need to change anything for odd rows then we can use $odd to filter out odd number of rows. and based on that we can change css or any other operations.
in this example we have changed the odd row with css so that you can see green color for odd number of rows.

index.html
<tr ng-class="{'success':$odd}" ng-repeat="item in details">
    <td>{{item.id}}</td>
    <td>{{item.first_name}}</td>
    <td>{{item.last_name}}</td>
    <td>{{item.email}}</td>
    <td>{{item.country}}</td>
    <td>{{item.ip_address}}</td>
</tr>
$odd in ngRepeat

$odd in ngRepeat

$even in ng-class with ng-repeat :

Syntax : ng-class="{'danger':$even}" ng-repeat = "item in items"

In table if we need to change anything for even rows then we can use $even to filter out even number of rows and based on that we can change css or any other operations.
in this example we have changed the even row with class to danger using the ng-class directive so that you can see red color for even number rows.

index.html
<tr ng-class="{'danger':$even}" ng-repeat="item in details">
    <td>{{item.id}}</td>
    <td>{{item.first_name}}</td>
    <td>{{item.last_name}}</td>
    <td>{{item.email}}</td>
    <td>{{item.country}}</td>
    <td>{{item.ip_address}}</td>
</tr>
$even in ngRepeat

$even in ngRepeat

$index in ng-class with ng-repeat :

Syntax : ng-class="{'text-primary':$index==3}" ng-repeat = "item in items"

In table if we need to change anything for row based on index then we can use $index.
In this example we have adding ‘text-primary’ class based on index matched on 3.

index.html
<tr ng-class="{'text-primary':$index==3}" ng-repeat="item in details">
    <td>{{item.id}}</td>
    <td>{{item.first_name}}</td>
    <td>{{item.last_name}}</td>
    <td>{{item.email}}</td>
    <td>{{item.country}}</td>
    <td>{{item.ip_address}}</td>
</tr>
$index in ngRepeat

$index in ngRepeat

$first in ng-class with ng-repeat :

Syntax : ng-class="{'text-danger':$first}" ng-repeat = "item in items"

In table if we need to change anything for first row then we can use $first.
in this example we have adding ‘text-danger’ class for first row.

index.html
<tr ng-class="{'text-danger':$first}" ng-repeat="item in details">
    <td>{{item.id}}</td>
    <td>{{item.first_name}}</td>
    <td>{{item.last_name}}</td>
    <td>{{item.email}}</td>
    <td>{{item.country}}</td>
    <td>{{item.ip_address}}</td>
</tr>
$first in ngRepeat

$first in ngRepeat

$last in ng-class with ng-repeat :

Syntax : ng-class="{'text-info':$last}" ng-repeat = "item in items"

In table if we need to change anything for last row then we can use $last.
in this example we have adding ‘text-info’ class for last row.

index.html
<tr ng-class="{'text-info':$last}" ng-repeat="item in details">
    <td>{{item.id}}</td>
    <td>{{item.first_name}}</td>
    <td>{{item.last_name}}</td>
    <td>{{item.email}}</td>
    <td>{{item.country}}</td>
    <td>{{item.ip_address}}</td>
</tr>
$last in ngRepeat

$last in ngRepeat

$middle in ng-class with ng-repeat :

Syntax : ng-class="{'danger':$middle}" ng-repeat = "item in items"

In table if we need to change anything for middle rows except first and last then we can use $middle.
in this example we have adding ‘danger’ class for middle rows.

index.html
<tr ng-class="{'danger':$middle}" ng-repeat="item in details">
    <td>{{item.id}}</td>
    <td>{{item.first_name}}</td>
    <td>{{item.last_name}}</td>
    <td>{{item.email}}</td>
    <td>{{item.country}}</td>
    <td>{{item.ip_address}}</td>
</tr>
$middle in ngRepeat

$middle in ngRepeat

Conclusion

In this article we have learned the use of ng-repeat along with various options in details.
 

Further Links

ngRepeat Documentation

About

Engineer. Blogger. I like to be updated on new upcoming emerging technologies.

Free PDF

Subscribe and get AngularJS Tips PDF. We never spam!
First Name:
Email:

Leave a Comment