python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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: '[email protected]'
                }]
            }, {
                dateTime: new Date(),
                detail: [{
                    name: 'Sunil Singh',
                    address: 'Kushinagar, UP, India',
                    phone: '+91-9XX5X1XXX9',
                    email: '[email protected]'
                }]
            }];

        }]);
    </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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions