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:
- <ul>
- <li data-ng-repeat="x in friends">
- {{ x }}
- </li>
- </ul>
Complete HTML Code:
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <meta charset="utf-8" />
- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
- </head>
- <body>
- <div data-ng-app="" data-ng-init="friends
- =['Banketeshvar Narayan','Mnaish Sharma','Rajnish Kumar','Om Prakash']">
- <p>List of Friends</p>
- <ul>
- <li data-ng-repeat="x in friends">
- {{ x }}
- </li>
- </ul>
- </div>
- </body>
- </html>
Browser output
![]()
Example 2:
- <ul class="example-animate-container">
- <li class="animate-repeat" ng-repeat="employee in employees | filter:q as results">
- EmployeeId :ABC000{{$index + 1}} <br /> Employee Name: {{employee.name}} <br /> Salary: {{employee.salary}} <br /> Years of experience : {{employee.experience}} <br /><br />
- </li>
- <li class="animate-repeat" ng-if="results.length == 0">
- <strong>No results found...</strong>
- </li>
- </ul>
Complete HTML Code:
- <!DOCTYPE html>
- <html>
- <head>
- <title>ng-repeat Example 2</title>
- <meta charset="utf-8" />
- <link href="animations.css" rel="stylesheet" type="text/css">
- <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
- <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular-animate.js"></script>
- </head>
- <body ng-app="ngAnimate">
-
-
- <div ng-init="employees = [
- {name:'B Kaushik', salary:160000, experience:'6.0'},
- {name:'M K Sharma', salary:150000, experience:'7.2'},
- {name:'R Choudhary', salary:90000, experience:'1.9'},
- {name:'M N Yadav', salary:80000, experience:'2.8'},
- {name:'M Kumar', salary:70000, experience:'5.6'},
- {name:'S Chouhan', salary:85000, experience:'5.9'},
- {name:'A P Verma', salary:53000, experience:'4.2'},
- {name:'S N Mitra ', salary:25000, experience:'3.0'},
- {name:'G H Pant', salary:12000, experience:'2.2'},
- {name:'H S Nirala', salary:125000, experience:'8.1'}
- ]">
- ABC Pvt. Ltd. has done more than 40% increment for {{employees.length}} employees. <br />They are:
- <input type="search" ng-model="q" placeholder="filter employees..." aria-label="filter employees" />
- <ul class="example-animate-container">
- <li class="animate-repeat" ng-repeat="employee in employees | filter:q as results">
- EmployeeId :ABC000{{$index + 1}} <br /> Employee Name: {{employee.name}} <br /> Salary: {{employee.salary}} <br /> Years of experience : {{employee.experience}} <br /><br />
- </li>
- <li class="animate-repeat" ng-if="results.length == 0">
- <strong>No results found...</strong>
- </li>
- </ul>
- </div>
-
-
- </body>
- </html>
![]()
Now you can filter data by typing text in textbox.
![]()