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">
  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>
  38. </body>
  39. </html>

Now you can filter data by typing text in textbox.