ng-repeat Directive in AngularJS

Banketeshvar Narayan
9y
2.3k
0
1

Blog

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.

Up Next

How To Use Nested ng-repeat In AngularJS

Ebook Download

View all

Azure in 24 Days

Read by 0 people

Download Now!

Learn

View all