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

Syntax:

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.

app.js

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.

<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> <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> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<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>       <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> </div>

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"} ]; });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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