Hello
everyone, I am going to share the code sample of nested ng-repeat in angularjs. The detail about it
as given below.
The
table of content for nested
ng-repeat.
- Syntax for nested ng-repeat
- HTML code for nested ng-repeat
- AngularJs code for nested ng-repeat
- Live demo example with HTML and AngularJs
- Result demo link url http://embed.plnkr.co/ep2jT6/preview
<ul ng-repeat="user in users
">
<li ng-repeat="detal in
user.detail "></li>
</ul>
Nested ng-repeat HTML code-sample
<li ng-repeat="user in users
">
{{user.dateTime | date:'mm/dd/yyyy hh:ss'}}
<ul>
<li ng-repeat="detal in
user.detail ">
{{detal.name}}, {{detal.address}}, {{detal.phone}}, {{detal.email}}
</li>
</ul>
</li>
Nested ng-repeat live demo code-sample
<!DOCTYPE html>
<html>
<head>
<title>nested ng-repeat in
angularjs</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script>
var app =
angular.module('nestedApp',
[]);
app.controller("nestedCtrl", ["$scope", function ($scope) {
$scope.users = [{
dateTime: new Date(),
detail: [{
name: 'Anil Singh',
address: 'Kushinagar, UP,
India',
phone: '+91-9XX551XXX9',
email: 'anil.singh@gmail.com'
}]
}, {
dateTime: new Date(),
detail: [{
name: 'Sunil Singh',
address: 'Kushinagar, UP, India',
phone: '+91-9XX5X1XXX9',
email: 'sunil.singh@gmail.com'
}]
}];
}]);
</script>
</head>
<body ng-app='nestedApp' ng-controller="nestedCtrl">
<h1>Nested ng-repeat in
AngularJs</h1>
<li ng-repeat="user in users
">
{{user.dateTime | date:'mm/dd/yyyy hh:ss'}}
<ul>
<li ng-repeat="detal in
user.detail ">
{{detal.name}}, {{detal.address}}, {{detal.phone}}, {{detal.email}}
</li>
</ul>
</li>
</body>
</html>
The
live demo link http://embed.plnkr.co/ep2jT6/preview
