Nested ng-repeat Directive:
Please copy paste the code below for the example of Nested ng-repeat Directive:
--------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Example of nested ng-repeat Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
angular.module('AppModule', [])
.controller('AppController', AppController);
function AppController() {
var vm = this;
//For nested ng-repeat contries with their names and cities
var Countries = [
//country1
{
name: "USA",
cities: [
{ name: "Boston" },
{ name: "New York" },
{ name: "San Francisco" }
]
},
//country2
{
name: "India",
cities: [
{ name: "Bangalore" },
{ name: "Delhi" },
{ name: "Mumbai" }
]
},
//country3
{
name: "UK",
cities: [
{ name: "London" },
{ name: "Bristol" },
{ name: "Birmingham" }
]
}
]
vm.countries = Countries;
}
</script>
<title>ng-repeat Directive</title>
<style>
th, td {
padding: 5px;
text-align: center;
vertical-align: top;
}
</style>
</head>
<body>
<!--Including Module and Controller-->
<div ng-app="AppModule" ng-controller="AppController as vm">
<ul>
<li ng-repeat="eachCountry in vm.countries">{{eachCountry.name}}
<ul>
<li ng-repeat="eachcity in eachCountry.cities">
{{eachcity.name}}
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------
Feel free to give your comments, your comments are really valuable..
Please copy paste the code below for the example of Nested ng-repeat Directive:
--------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Example of nested ng-repeat Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
angular.module('AppModule', [])
.controller('AppController', AppController);
function AppController() {
var vm = this;
//For nested ng-repeat contries with their names and cities
var Countries = [
//country1
{
name: "USA",
cities: [
{ name: "Boston" },
{ name: "New York" },
{ name: "San Francisco" }
]
},
//country2
{
name: "India",
cities: [
{ name: "Bangalore" },
{ name: "Delhi" },
{ name: "Mumbai" }
]
},
//country3
{
name: "UK",
cities: [
{ name: "London" },
{ name: "Bristol" },
{ name: "Birmingham" }
]
}
]
vm.countries = Countries;
}
</script>
<title>ng-repeat Directive</title>
<style>
th, td {
padding: 5px;
text-align: center;
vertical-align: top;
}
</style>
</head>
<body>
<!--Including Module and Controller-->
<div ng-app="AppModule" ng-controller="AppController as vm">
<ul>
<li ng-repeat="eachCountry in vm.countries">{{eachCountry.name}}
<ul>
<li ng-repeat="eachcity in eachCountry.cities">
{{eachcity.name}}
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------
Feel free to give your comments, your comments are really valuable..