JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myModuleForNgRepeat">
<head runat="server">
<script src="Scripts/angular.js"></script>
<script src="Scripts/ngrepeat.js"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div ng-controller="myControllerForNgRepeat">
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr ng-repeat ="employ in emps">
<td>{{ employ.firstName }}</td>
<td>{{ employ.lastName }}</td>
<td>{{ employ.Gender }}</td>
</tr>
</tbody>
</table>
</div>
<div ng-controller="myControllerForNestedNgRepeat">
<ul>
<li ng-repeat="country in contries">
Country : {{country.name}}
<ul>
<li ng-repeat="citi in country.cities">
Citi : {{citi.name}}
</li>
</ul>
</li>
</ul>
</div>
</form>
</body>
</html>
JavaScript
/// <reference path="angular.js" />
var myAppForNgRepeat = angular.module("myModuleForNgRepeat", [])
.controller("myControllerForNgRepeat", function ($scope) {
var employees = [{
firstName: "devi1",
lastName: "Priya1",
Gender: "Female",
},
{
firstName: "devi2",
lastName: "Priya2",
Gender: "Female",
},
{
firstName: "devi3",
lastName: "Priya3",
Gender: "Female",
},
{
firstName: "devi4",
lastName: "Priya4",
Gender: "Female",
},
{
firstName: "devi5",
lastName: "Priya5",
Gender: "Female",
}
]
$scope.emps = employees;
})
.controller("myControllerForNestedNgRepeat", function ($scope)
{
var countries = [
{
name: "india",
cities: [
{ name: "vijayawada" },
{ name: "hyderabad" },
{ name: "tirupathi" },
{ name: "piduguralla" },
]
},
{
name: "india",
cities: [
{ name: "vijayawada" },
{ name: "hyderabad" },
{ name: "tirupathi" },
{ name: "piduguralla" },
]
},
{
name: "india",
cities: [
{ name: "vijayawada" },
{ name: "hyderabad" },
{ name: "tirupathi" },
{ name: "piduguralla" },
]
}
];
$scope.contries =contries;
}
);