Diving deep into ngRepeat directive in AngularJS

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.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.

{{item.id}} {{item.first_name}} {{item.last_name}} {{item.email}} {{item.country}} {{item.ip_address}}

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.

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,

{{key}} {{value.id}} {{value.first_name}} {{value.last_name}} {{value.email}} {{value.country}} {{value.ip_address}}

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

$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.

{{item.id}} {{item.first_name}} {{item.last_name}} {{item.email}} {{item.country}} {{item.ip_address}}

$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.

{{item.id}} {{item.first_name}} {{item.last_name}} {{item.email}} {{item.country}} {{item.ip_address}}

$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.

{{item.id}} {{item.first_name}} {{item.last_name}} {{item.email}} {{item.country}} {{item.ip_address}}

$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.

{{item.id}} {{item.first_name}} {{item.last_name}} {{item.email}} {{item.country}} {{item.ip_address}}

$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.

{{item.id}} {{item.first_name}} {{item.last_name}} {{item.email}} {{item.country}} {{item.ip_address}}

$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.

{{item.id}} {{item.first_name}} {{item.last_name}} {{item.email}} {{item.country}} {{item.ip_address}}

Conclusion

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

Further Links

ngRepeat Documentation