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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.