nested ng-repeat in angularjs

Nested ng-repeat in AngularJs

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.
  1. Syntax for nested ng-repeat
  2. HTML code for nested ng-repeat                       
  3. AngularJs code for nested ng-repeat
  4. Live demo example with HTML and AngularJs
  5. Result demo link url http://embed.plnkr.co/ep2jT6/preview
Syntax for nested ng-repeat

 <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>




ANIL SINGH

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..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^