Knowledge Management Banner

Knowledge Management Banner

ng-repeat in AngularJS

It is generally used to render list of objects or array of objects

Download angularjs from following website -

https://angularjs.org

Click here to see the demo / output

Html Code

 <script src="angular.1.4.8.min.js"></script>  
 <div ng-app="MyApp">  
   <div ng-controller="MyController">  
     <style type="text/css">  
       table, td, th {  
         border-collapse: collapse;  
         border: 1px solid red;  
         padding: 5px;  
         font-family:Calibri;  
       }  
     </style>  
     <h1>{{Title}}</h1>  
     <hr />  
     <table id="DemoTable">  
       <tr>  
         <th>First Name</th>  
         <th>Last Name</th>  
         <th>Country</th>  
       </tr>  
       <tr ng-repeat="x in DetailArray">  
         <td>{{x.Name}}</td>  
         <td>{{x.LastName}}</td>  
         <td>{{x.Address}}</td>  
       </tr>  
     </table>  
   </div>  
 </div>  
 <script src="index.js"></script>  

AngularJS Code

 /// <reference path="angular.1.4.8.min.js" />  
 var ngapp = angular.module("MyApp", []);  
 ngapp.controller("MyController", function ($scope) {  
   $scope.Title = "ng-repeat";  
   var TempArray = [{ Name: "John", LastName: "Doe", Address: "California" },  
           { Name: "Jennifer", LastName: "Dolle", Address: "London" },  
           { Name: "Theon", LastName: "GreyJoy", Address: "IronBorn" },  
           { Name: "Cersei", LastName: "Lannistor", Address: "7 Kingdom" }];  
   $scope.DetailArray = TempArray;  
 });  

Click here to see the demo / output

No comments

Powered by Blogger.