{"id":260,"date":"2016-03-18T20:59:00","date_gmt":"2016-03-18T20:59:00","guid":{"rendered":"http:\/\/www.java2blog.com\/?p=260"},"modified":"2023-11-25T14:39:41","modified_gmt":"2023-11-25T09:09:41","slug":"angularjs-ng-repeat-example","status":"publish","type":"post","link":"https:\/\/java2blog.com\/angularjs-ng-repeat-example\/","title":{"rendered":"Angularjs ng-repeat example"},"content":{"rendered":"<div dir=\"ltr\" style=\"text-align: left;\">\n<h2 style=\"text-align: left;\">AngularJS tutorial:<\/h2>\n<\/div>\n<div dir=\"ltr\" style=\"text-align: left;\">\n<ul>\n<li dir=\"ltr\" style=\"text-align: left;\"><a href=\"http:\/\/www.java2blog.com\/2016\/03\/angularjs-hello-world-example.html\">AngularJs hello world example<\/a><\/li>\n<li dir=\"ltr\" style=\"text-align: left;\"><a href=\"http:\/\/www.java2blog.com\/2016\/03\/angularjs-controller-examples.html\">AngularJs controller examples<\/a><\/li>\n<li dir=\"ltr\" style=\"text-align: left;\"><a href=\"http:\/\/www.java2blog.com\/2016\/03\/angularjs-ng-repeat-example.html\">AngularJs ng-repeat example<\/a><\/li>\n<li dir=\"ltr\" style=\"text-align: left;\"><a href=\"http:\/\/www.java2blog.com\/2016\/04\/angularjs-built-in-filter-examples.html\">AngularJs Built-in filter example<\/a><\/li>\n<li dir=\"ltr\" style=\"text-align: left;\"><a href=\"http:\/\/www.java2blog.com\/2016\/04\/angularjs-custom-filter-example.html\">AngularJs custom filter example<\/a><\/li>\n<li dir=\"ltr\" style=\"text-align: left;\"><a href=\"http:\/\/www.java2blog.com\/2016\/03\/angularjs-ajax-example-using-http.html\">AngularJs ajax example using $http<\/a><\/li>\n<li dir=\"ltr\" style=\"text-align: left;\"><a href=\"http:\/\/www.java2blog.com\/2016\/03\/angularjs-restful-web-service-example.html\">AngularJS RESTful web service JAXRS CRUD example using $http<\/a><\/li>\n<\/ul>\n<\/div>\n<div dir=\"ltr\" style=\"text-align: left;\"><\/div>\n<div dir=\"ltr\" style=\"text-align: left;\">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.<\/p>\n<h4 style=\"text-align: left;\">Syntax:<\/h4>\n<pre class=\"lang:default decode:true\"><\/pre>\n<table>\n<tr ng-repeat=\"con in countries\">\n<td>{{ con.name }}<\/td>\n<td>{{ con.capital }}<\/td>\n<\/tr>\n<\/table>\n<p>Here <b>countries<\/b> is json array defined in app.js.<\/p>\n<h4 style=\"text-align: left;\">Lets understand with example .<\/h4>\n<p><span style=\"text-align: justify;\">Copy below text , open notepad , paste it and save it as\u00a0<\/span><b style=\"text-align: justify;\">angularJSExample.html\u00a0<\/b><span style=\"text-align: justify;\">and open it in the browser.<\/span><br \/>\n<span style=\"text-align: justify;\"><br \/>\n<\/span><\/p>\n<pre class=\"xml\" data-blogger-escaped-name=\"code\" data-blogger-escaped-style=\"text-align: left;\">\n\n\n<meta charset=\"UTF-8\">\n<title>Angular js<\/title>\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.5.0\/angular.min.js\"><\/script>\n<script src=\"app.js\"><\/script>\n\n\n\n<div ng-app=\"myApp\" ng-controller=\"java2blogContoller\">\n  <table border=\"1\">\n    <thead>\n  <tr>\n     <th>Name<\/th>\n     <th>Captial<\/th>\n  <\/tr>\n <\/thead>\n  <tr ng-repeat=\"con in countries\">\n    <td>{{ con.name }}<\/td>\n    <td>{{ con.capital }}<\/td>\n  <\/tr>\n<\/table>\n \n\n<\/div>\n\n<\/pre>\n<div><\/div>\n<h4 style=\"text-align: left;\"><b>app.js <\/b><\/h4>\n<pre name=\"code\">var app = angular.module('myApp', []);\n app.controller('java2blogContoller', function($scope) {\n\n      $scope.countries=\n        [\n        {\"name\": \"India\" , \"capital\" : \"delhi\"},\n         {\"name\": \"England\" , \"capital\" : \"London\"},\n         {\"name\": \"France\" , \"capital\" : \"Paris\"},\n         {\"name\": \"Japan\" , \"capital\" : \"Tokyo\"}\n\n      ];\n\n });<\/pre>\n<h4>Output:<\/h4>\n<p>When you open html file in browser, you will get following output:<\/p>\n<div style=\"clear: both; text-align: center;\"><img decoding=\"async\" src=\"https:\/\/java2blog.com\/wp-content\/uploads\/2021\/09\/ng-repeatOut.png\" border=\"0\"><\/div>\n<div>\n<h4 style=\"text-align: left;\">Live demo:<\/h4>\n<h4 style=\"text-align: left;\"><a href=\"http:\/\/jsbin.com\/sumapu\/embed?html,js,output\">Angular js on jsbin.com<\/a><\/h4>\n<\/div>\n<h4 style=\"text-align: left;\">Some other properties:<\/h4>\n<p>There are some properties which is accessible to local scope which we can use in ng-repeat directly.<\/p>\n<div>\n<table style=\"border-collapse: collapse; border: none; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 0cm 5.4pt 0cm 5.4pt; mso-yfti-tbllook: 1184;\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr style=\"height: 12.9pt; mso-yfti-firstrow: yes; mso-yfti-irow: 0;\">\n<td style=\"border: 1pt solid; height: 12.9pt; padding: 0cm 5.4pt; width: 159.1pt;\" valign=\"top\" width=\"212\">\n<div style=\"margin-bottom: 0.0001pt;\"><b>Variable<\/b><\/div>\n<\/td>\n<td style=\"border: 1pt solid; height: 12.9pt; padding: 0cm 5.4pt; width: 159.1pt;\" valign=\"top\" width=\"212\">\n<div style=\"margin-bottom: 0.0001pt;\"><b>Type<\/b><\/div>\n<\/td>\n<td style=\"border: 1pt solid; height: 12.9pt; padding: 0cm 5.4pt; width: 159.1pt;\" valign=\"top\" width=\"212\">\n<div style=\"margin-bottom: 0.0001pt;\"><b>Description<\/b><\/div>\n<\/td>\n<\/tr>\n<tr style=\"height: 38.05pt; mso-yfti-irow: 1;\">\n<td style=\"border: 1pt solid; height: 38.05pt; padding: 0cm 5.4pt; width: 159.1pt;\" valign=\"top\" width=\"212\">\n<div style=\"margin-bottom: 0.0001pt;\"><span lang=\"EN-US\" style=\"color: red;\">$index<\/span><\/div>\n<\/td>\n<td style=\"border-bottom-width: 1pt; border-color: initial; border-right-width: 1pt; border-style: none solid solid none; height: 38.05pt; padding: 0cm 5.4pt; width: 159.1pt;\" valign=\"top\" width=\"212\">\n<div style=\"margin-bottom: 0.0001pt;\">number<\/div>\n<\/td>\n<td style=\"border-bottom-width: 1pt; border-color: initial; border-right-width: 1pt; border-style: none solid solid none; height: 38.05pt; padding: 0cm 5.4pt; width: 159.1pt;\" valign=\"top\" width=\"212\">\n<div style=\"margin-bottom: 0.0001pt;\">It carries index of repeated element<\/div>\n<\/td>\n<\/tr>\n<tr style=\"height: 51.7pt; mso-yfti-irow: 2;\">\n<td style=\"border: 1pt solid; height: 51.7pt; padding: 0cm 5.4pt; width: 159.1pt;\" valign=\"top\" width=\"212\">\n<div style=\"margin-bottom: 0.0001pt;\"><span lang=\"EN-US\" style=\"color: red;\">$first<\/span><\/div>\n<\/td>\n<td style=\"border-bottom-width: 1pt; border-color: initial; border-right-width: 1pt; border-style: none solid solid none; height: 51.7pt; padding: 0cm 5.4pt; width: 159.1pt;\" valign=\"top\" width=\"212\">\n<div style=\"margin-bottom: 0.0001pt;\"><\/div>\n<p>boolean<\/td>\n<td style=\"border-bottom-width: 1pt; border-color: initial; border-right-width: 1pt; border-style: none solid solid none; height: 51.7pt; padding: 0cm 5.4pt; width: 159.1pt;\" valign=\"top\" width=\"212\">\n<div style=\"margin-bottom: 0.0001pt;\">true if repeated element is first element<\/div>\n<\/td>\n<\/tr>\n<tr style=\"height: 25.85pt; mso-yfti-irow: 3;\">\n<td style=\"border: 1pt solid; height: 25.85pt; padding: 0cm 5.4pt; width: 159.1pt;\" valign=\"top\" width=\"212\">\n<div style=\"margin-bottom: 0.0001pt;\"><a href=\"http:\/\/www.blogger.com\/blogger.g?blogID=1114068605611316469\" name=\"_GoBack\"><\/a><span style=\"color: red;\">$middle<\/span><\/div>\n<\/td>\n<td style=\"border-bottom-width: 1pt; border-color: initial; border-right-width: 1pt; border-style: none solid solid none; height: 25.85pt; padding: 0cm 5.4pt; width: 159.1pt;\" valign=\"top\" width=\"212\">\n<div style=\"margin-bottom: 0.0001pt;\">boolean<\/div>\n<\/td>\n<td style=\"border-bottom-width: 1pt; border-color: initial; border-right-width: 1pt; border-style: none solid solid none; height: 25.85pt; padding: 0cm 5.4pt; width: 159.1pt;\" valign=\"top\" width=\"212\">\n<div style=\"margin-bottom: 0.0001pt;\">true if repeated element is middle element<\/div>\n<\/td>\n<\/tr>\n<tr style=\"height: 25.15pt; mso-yfti-irow: 4;\">\n<td style=\"border: 1pt solid; height: 25.15pt; padding: 0cm 5.4pt; width: 159.1pt;\" valign=\"top\" width=\"212\">\n<div style=\"margin-bottom: 0.0001pt;\"><span style=\"color: red;\">$last<\/span><\/div>\n<\/td>\n<td style=\"border-bottom-width: 1pt; border-color: initial; border-right-width: 1pt; border-style: none solid solid none; height: 25.15pt; padding: 0cm 5.4pt; width: 159.1pt;\" valign=\"top\" width=\"212\">\n<div style=\"margin-bottom: 0.0001pt;\">boolean<\/div>\n<\/td>\n<td style=\"border-bottom-width: 1pt; border-color: initial; border-right-width: 1pt; border-style: none solid solid none; height: 25.15pt; padding: 0cm 5.4pt; width: 159.1pt;\" valign=\"top\" width=\"212\">\n<div style=\"margin-bottom: 0.0001pt;\">true if repeated element is last element<\/div>\n<\/td>\n<\/tr>\n<tr style=\"height: 89.75pt; mso-yfti-irow: 5; mso-yfti-lastrow: yes;\">\n<td style=\"border: 1pt solid; height: 89.75pt; padding: 0cm 5.4pt; width: 159.1pt;\" valign=\"top\" width=\"212\">\n<div style=\"margin-bottom: 0.0001pt;\"><span lang=\"EN-US\" style=\"color: red;\">$even<\/span><\/div>\n<\/td>\n<td style=\"border-bottom-width: 1pt; border-color: initial; border-right-width: 1pt; border-style: none solid solid none; height: 89.75pt; padding: 0cm 5.4pt; width: 159.1pt;\" valign=\"top\" width=\"212\">\n<div>boolean<\/div>\n<\/td>\n<td style=\"border-bottom-width: 1pt; border-color: initial; border-right-width: 1pt; border-style: none solid solid none; height: 25.15pt; padding: 0cm 5.4pt; width: 159.1pt;\" valign=\"top\" width=\"212\">\n<div style=\"margin-bottom: 0.0001pt;\">It depends on $index.<br \/>\ntrue if $index is even<\/div>\n<\/td>\n<\/tr>\n<tr style=\"height: 89.75pt; mso-yfti-irow: 5; mso-yfti-lastrow: yes;\">\n<td style=\"border: 1pt solid; height: 89.75pt; padding: 0cm 5.4pt; width: 159.1pt;\" valign=\"top\" width=\"212\">\n<div style=\"margin-bottom: 0.0001pt;\"><span lang=\"EN-US\" style=\"color: red;\">$odd<\/span><\/div>\n<\/td>\n<td style=\"border-bottom-width: 1pt; border-color: initial; border-right-width: 1pt; border-style: none solid solid none; height: 89.75pt; padding: 0cm 5.4pt; width: 159.1pt;\" valign=\"top\" width=\"212\">\n<div>boolean<\/div>\n<\/td>\n<td style=\"border-bottom-width: 1pt; border-color: initial; border-right-width: 1pt; border-style: none solid solid none; height: 25.15pt; padding: 0cm 5.4pt; width: 159.1pt;\" valign=\"top\" width=\"212\">\n<div style=\"margin-bottom: 0.0001pt;\">It depends on $index.<br \/>\ntrue if $index is odd<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Lets change color of odd and even rows of table using $even and $odd.<\/p>\n<pre class=\"xml \" data-blogger-escaped-name=\"code\">\n\n\n<meta charset=\"UTF-8\">\n<title>Angular js<\/title>\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.5.0\/angular.min.js\"><\/script>\n<script src=\"app.js\"><\/script>\n\n\n\n<div ng-app=\"myApp\" ng-controller=\"java2blogContoller\">\n  <table border=\"1\">\n    <thead>\n  <tr>\n     <th>Name<\/th>\n     <th>Captial<\/th>\n  <\/tr>\n <\/thead>\n  <tr ng-repeat=\"con in countries\">\n    <td ng-if=\"$odd\" style=\"background-color:#f1f1f1\"> {{ con.name }}<\/td>\n    <td ng-if=\"$even\" style=\"background-color:#f1aaaa\"> {{ con.name }}<\/td>\n    <td ng-if=\"$odd\" style=\"background-color:#f1f1f1\">{{ con.capital }}<\/td>\n    <td ng-if=\"$even\" style=\"background-color:#f1aaaa\">{{ con.capital }}<\/td>\n  <\/tr>\n<\/table>\n \n<\/div>\n\n\n<\/pre>\n<h4><b>app.js<\/b><\/h4>\n<pre name=\"code\">var app = angular.module('myApp', []);\n app.controller('java2blogContoller', function($scope) {\n\n      $scope.countries=\n        [\n        {\"name\": \"India\" , \"capital\" : \"delhi\"},\n         {\"name\": \"England\" , \"capital\" : \"London\"},\n         {\"name\": \"France\" , \"capital\" : \"Paris\"},\n         {\"name\": \"Japan\" , \"capital\" : \"Tokyo\"}\n\n      ];\n\n });<\/pre>\n<h4 style=\"text-align: left;\">Output:<\/h4>\n<p>When you open html file in browser, you will get following output:<\/p>\n<div style=\"clear: both; text-align: center;\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/java2blog.com\/wp-content\/uploads\/2021\/09\/ngrepeatOddVen.png\" width=\"640\" height=\"236\" border=\"0\"><\/div>\n<h4 style=\"text-align: left;\">Live demo:<\/h4>\n<p><a href=\"http:\/\/jsbin.com\/tipuxu\/embed?html,js,output\">Angular js on jsbin.com<\/a><\/p>\n<div style=\"text-align: justify;\">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.<\/div>\n<div style=\"text-align: justify;\"><\/div>\n<div style=\"text-align: justify;\"><b>Reference:\u00a0<\/b><\/div>\n<div style=\"text-align: justify;\">https:\/\/docs.angularjs.org\/api\/ng\/directive\/ngRepeat<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[49],"tags":[],"_links":{"self":[{"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/posts\/260"}],"collection":[{"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/comments?post=260"}],"version-history":[{"count":0,"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/posts\/260\/revisions"}],"wp:attachment":[{"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/media?parent=260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/categories?post=260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/tags?post=260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}