AngularJS ng-repeat Directive:
ng-repeat directive in AngularJS is used when we want to print all the items in an array or collection. It is useful in creating tables. ng-repeat is similar to forEach loop in C#. It iterates each item in an array and returns it. We can also use filters along with ng-repeat directive to get filtered items from a collection. Let’s look at an example.
Syntax:
<element ng-repeat="expression"></element>
where element can be li tag, tr tag, div tag, etc.
Example: using with table tr tag
For creating a table with an array object we can use ng-repeat directive in angularJS.
<html>
<head>
<title>AngularJS - Expressions JSON Objects</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body ng-app="myApp" style="padding: 10px;background-color: #f7f7f7;">
<div ng-controller="myController1">
<table class="table table-bordered table-hover" style="width:700px;background-color: #fff;">
<thead class="thead-dark">
<tr>
<th>Name</th>
<th>Department</th>
<th>Salary</th>
<th>DOJ</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.name | uppercase}}</td>
<td>{{employee.department | lowercase}}</td>
<td>{{employee.salary | currency}}</td>
<td>{{employee.DOJ | date:'dd-MMM-yyyy'}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var app = angular.module("myApp",[]);
app.controller("myController1",function ($scope){
$scope.employees = [
{name:"John",department:"IT Support",salary:"42000",DOJ:"2020-09-15"},
{name:"Rick",department:"IT Support",salary:"50000",DOJ:"2020-01-26"},
{name:"Mathew",department:"Human Resource",salary:"37000",DOJ:"2019-07-25"},
{name:"Rose",department:"Software Development",salary:"80000",DOJ:"2018-05-16"},
{name:"Johnson",department:"Software Development",salary:"150000",DOJ:"2015-12-18"},
{name:"Jay",department:"Product Lead",salary:"140000",DOJ:"2018-07-31"},
{name:"Robin",department:"Quality Analyst",salary:"73000",DOJ:"2017-07-25"},
{name:"Mark",department:"Human Resource",salary:"37000",DOJ:"2019-07-25"}
];
});
</script>
</html>
Here we are declaring employees object in controller myController1 and using it with ng-repeat on the view. The directive declaration ng-repeat="employee in employees" will iterate each item in the employees object and each item will be having its own scope object i.e. employee.
Example of using ng-repeat with div:
<html>
<head>
<title>AngularJS - Expressions JSON Objects</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body ng-app="myApp" style="padding: 10px;background-color: #f7f7f7;">
<div ng-controller="myController1">
<div ng-repeat="employee in employees">
<p>Sr. No. {{$index + 1}}</p>
<p>Name: {{employee.name | uppercase}} Department: {{employee.department}}</p>
<p>Salary: {{employee.salary | currency}} Date of Joining: {{employee.DOJ | date:'dd-MMM-yyyy'}}</p>
<hr/>
</div>
</div>
</body>
<script>
var app = angular.module("myApp",[]);
app.controller("myController1",function ($scope){
$scope.employees = [
{name:"John",department:"IT Support",salary:"42000",DOJ:"2020-09-15"},
{name:"Rick",department:"IT Support",salary:"50000",DOJ:"2020-01-26"},
{name:"Mathew",department:"Human Resource",salary:"37000",DOJ:"2019-07-25"},
{name:"Rose",department:"Software Development",salary:"80000",DOJ:"2018-05-16"},
{name:"Johnson",department:"Software Development",salary:"150000",DOJ:"2015-12-18"},
{name:"Jay",department:"Product Lead",salary:"140000",DOJ:"2018-07-31"},
{name:"Robin",department:"Quality Analyst",salary:"73000",DOJ:"2017-07-25"},
{name:"Mark",department:"Human Resource",salary:"37000",DOJ:"2019-07-25"}
];
});
</script>
</html>
Here $index property is used to retrieve current item sequence number in the parent array. $index + 1 is used because it starts from 0 and we don’t want user to see Serial no. of an Employee as 0.
Example with li tag:
<html>
<head>
<title>AngularJS - Expressions JSON Objects</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body ng-app="myApp" style="padding: 10px;background-color: #f7f7f7;">
<div ng-controller="myController1">
<ul ng-repeat="employee in employees">
<li> {{employee.name}}</li>
</ul>
</div>
</body>
<script>
var app = angular.module("myApp",[]);
app.controller("myController1",function ($scope){
$scope.employees = [
{name:"John",department:"IT Support",salary:"42000",DOJ:"2020-09-15"},
{name:"Rick",department:"IT Support",salary:"50000",DOJ:"2020-01-26"},
{name:"Mathew",department:"Human Resource",salary:"37000",DOJ:"2019-07-25"},
{name:"Rose",department:"Software Development",salary:"80000",DOJ:"2018-05-16"},
{name:"Johnson",department:"Software Development",salary:"150000",DOJ:"2015-12-18"},
{name:"Jay",department:"Product Lead",salary:"140000",DOJ:"2018-07-31"},
{name:"Robin",department:"Quality Analyst",salary:"73000",DOJ:"2017-07-25"},
{name:"Mark",department:"Human Resource",salary:"37000",DOJ:"2019-07-25"}
];
});
</script>
</html>
In the next part of this series we will learn about AngularJS services.
References: AngularJS API DOC