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
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
