How To Use Nested ng-repeat In AngularJS

How to use nested ng-repeat in AngularJS
 
The ng-repeat directive instantiates a template once per item from a collection like array, list etc. In this blog, I am using nested ng-repeat to show the country list along with their city name.
 
Create a project and install AngularJS from NuGet Package, add a script file to the project and write Angular code.
 
Note: If you are not getting the intellisence, add the reference of Angular js to the script file
 
/// <reference path="angular.min.js" />
 
JavaScript code-
  1. var myApp6 = angular.module("myModule6", []).controller("myApp6Controller", function($scope) {  
  2.     var countries = [{  
  3.         name: "UK",  
  4.         cities: [{  
  5.             name: "UK City1"  
  6.         }, {  
  7.             name: "UK City2"  
  8.         }, {  
  9.             name: "UK City3"  
  10.         }]  
  11.     }, {  
  12.         name: "US",  
  13.         cities: [{  
  14.             name: "US City1"  
  15.         }, {  
  16.             name: "US City2"  
  17.         }, {  
  18.             name: "US City3"  
  19.         }]  
  20.     }, {  
  21.         name: "India",  
  22.         cities: [{  
  23.             name: "India City1"  
  24.         }, {  
  25.             name: "India City2"  
  26.         }, {  
  27.             name: "India City3"  
  28.         }]  
  29.     }];  
  30.     $scope.countries = countries;  
  31. })  
Here, I have created a module named myApp6 with the controller my App6Controller. Here, I have used an array named countries having two properties name and cities. Again, cities is an array having a name property.
 
Now, I will show this data, using nested array.
 
HTML code-
  1. <div id="App1" ng-app="myModule6" ng-controller="myApp6Controller">  
  2.     <div>  
  3.         <ul>  
  4.             <li ng-repeat="country in countries">  
  5.                 {{country.name}}  
  6.                 <ul>  
  7.                     <li ng-repeat="city in country.cities">  
  8.                         {{city.name}}  
  9.                     </li>  
  10.                 </ul>  
  11.             </li>  
  12.         </ul>  
  13.     </div>  
  14. </div>  
Output

 
X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now