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