Angularjs ng-repeat example

AngularJS tutorial:

    AngularJs hello world example AngularJs controller examples AngularJs ng-repeat example AngularJs Built-in filter example AngularJs custom filter example AngularJs ajax example using $http AngularJS RESTful web service JAXRS CRUD example using $http
ng-repeat is a angular js directive which is often used to display data in tables. It is widely used directive. It works very much similar to java for each loop.

Syntax:

<table>
  <tr ng-repeat="con in countries">
    <td>{{ con.name }}</td>
    <td>{{ con.capital }}</td>
  </tr>
</table>

Here countries is json array defined in app.js.

Lets understand with example .

Copy below text , open notepad , paste it and save it as angularJSExample.html and open it in the browser.


<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Angular js</title>  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>  
<script src="app.js"></script>  
  
</head>  
<body>  
<div ng-app="myApp" ng-controller="java2blogContoller">  
  <table border="1">
    <thead>
  <tr>
     <th>Name</th>
     <th>Captial</th>
  </tr>
 </thead>
  <tr ng-repeat="con in countries">
    <td>{{ con.name }}</td>
    <td>{{ con.capital }}</td>
  </tr>
</table>
 </br>  
  
</div>  
</body>  
</html> 

app.js

var app = angular.module('myApp', []);
 app.controller('java2blogContoller', function($scope) {
      
      $scope.countries=
        [
        {"name": "India" , "capital" : "delhi"},
         {"name": "England" , "capital" : "London"},
         {"name": "France" , "capital" : "Paris"},
         {"name": "Japan" , "capital" : "Tokyo"}
               
      ];
         
 });

Output:

When you open html file in browser, you will get following output:

Some other properties: 

There are some properties which is accessible to local scope which we can use in ng-repeat directly.

Variable
Type
Description
$index
number
It carries index of repeated element
$first
boolean
true if repeated element is first element
$middle
boolean
true if repeated element is middle element
$last
boolean
true if repeated element is last element
$even
boolean

It depends on $index.
true if $index is even
$odd
boolean

It depends on $index.
true if $index is odd

Lets change color of odd and even rows of table using $even and $odd.

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Angular js</title>  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>  
<script src="app.js"></script>  
  
</head>  
<body>  
<div ng-app="myApp" ng-controller="java2blogContoller">  
  <table border="1">
    <thead>
  <tr>
     <th>Name</th>
     <th>Captial</th>
  </tr>
 </thead>
  <tr ng-repeat="con in countries">
    <td ng-if="$odd" style="background-color:#f1f1f1"> {{ con.name }}</td>
    <td ng-if="$even" style="background-color:#f1aaaa"> {{ con.name }}</td>
    <td ng-if="$odd" style="background-color:#f1f1f1">{{ con.capital }}</td>
    <td ng-if="$even" style="background-color:#f1aaaa">{{ con.capital }}</td>
  </tr>
</table>
 </br>   
</div>  
</body>  
</html>  

app.js

var app = angular.module('myApp', []);
 app.controller('java2blogContoller', function($scope) {
      
      $scope.countries=
        [
        {"name": "India" , "capital" : "delhi"},
         {"name": "England" , "capital" : "London"},
         {"name": "France" , "capital" : "Paris"},
         {"name": "Japan" , "capital" : "Tokyo"}
               
      ];
         
 });

Output:

When you open html file in browser, you will get following output:

Live demo: 

Angular js on jsbin.com

As you can see, we have used $even to check even row and $odd to check odd row. ng-if is another angular directive which is used for checking if condition. We are going to use ng-repeat in many other examples.

Reference: 
https://docs.angularjs.org/api/ng/directive/ngRepeat

Written by Arpit:

If you have read the post and liked it. Please connect with me on Facebook | Twitter | Google Plus

 

Java tutorial for beginners Copyright © 2012