Post
Ask Question

ng-repeat Directive in AngularJS

ng-repeat directive is used on an array of objects to repeat an HTML element. We can use $index, $first, $last, $middle, $even, $odd with ngRepeat. Let try to understand it using examples.

Example 1:

  1. <ul>  
  2. <li data-ng-repeat="x in friends">  
  3.    {{ x }}  
  4. </li>  
  5. </ul> 

Complete HTML Code:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>  
  7. </head>  
  8. <body>  
  9.     <div data-ng-app="" data-ng-init="friends  
  10.          =['Banketeshvar Narayan','Mnaish Sharma','Rajnish Kumar','Om Prakash']">  
  11.         <p>List of Friends</p>  
  12.         <ul>  
  13.             <li data-ng-repeat="x in friends">  
  14.                 {{ x }}  
  15.             </li>  
  16.         </ul>  
  17.     </div>  
  18. </body>  
  19. </html> 

Browser output


Example 2:

  1. <ul class="example-animate-container">  
  2.             <li class="animate-repeat" ng-repeat="employee in employees | filter:q as results">  
  3.                 EmployeeId :ABC000{{$index + 1}} <br /> Employee Name: {{employee.name}} <br /> Salary: {{employee.salary}} <br /> Years of experience : {{employee.experience}} <br /><br />  
  4.             </li>  
  5.             <li class="animate-repeat" ng-if="results.length == 0">  
  6.                 <strong>No results found...</strong>  
  7.             </li>  
  8. </ul> 

Complete HTML Code:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>ng-repeat Example 2</title>  
  5.     <meta charset="utf-8" />  
  6.     <link href="animations.css" rel="stylesheet" type="text/css">  
  7.     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>  
  8.     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular-animate.js"></script>  
  9. </head>  
  10. <body ng-app="ngAnimate">  
  11.   
  12.   
  13.     <div ng-init="employees = [  
  14.   {name:'B Kaushik',    salary:160000,  experience:'6.0'},  
  15.   {name:'M K Sharma',   salary:150000,  experience:'7.2'},  
  16.   {name:'R Choudhary',  salary:90000,   experience:'1.9'},  
  17.   {name:'M N Yadav',    salary:80000,   experience:'2.8'},  
  18.   {name:'M Kumar',      salary:70000,   experience:'5.6'},  
  19.   {name:'S Chouhan',    salary:85000,   experience:'5.9'},  
  20.   {name:'A P Verma',    salary:53000,   experience:'4.2'},  
  21.   {name:'S N Mitra ',   salary:25000,   experience:'3.0'},  
  22.   {name:'G H Pant',     salary:12000,   experience:'2.2'},  
  23.   {name:'H S Nirala',   salary:125000,  experience:'8.1'}  
  24. ]">  
  25.         ABC Pvt. Ltd. has done more than 40% increment for  {{employees.length}} employees. <br />They are:  
  26.         <input type="search" ng-model="q" placeholder="filter employees..." aria-label="filter employees" />  
  27.         <ul class="example-animate-container">  
  28.             <li class="animate-repeat" ng-repeat="employee in employees | filter:q as results">  
  29.                 EmployeeId :ABC000{{$index + 1}} <br /> Employee Name: {{employee.name}} <br /> Salary: {{employee.salary}} <br /> Years of experience : {{employee.experience}} <br /><br />  
  30.             </li>  
  31.             <li class="animate-repeat" ng-if="results.length == 0">  
  32.                 <strong>No results found...</strong>  
  33.             </li>  
  34.         </ul>  
  35.     </div>  
  36.   
  37.   
  38. </body>  
  39. </html> 

 

Now you can filter data by typing text in textbox.