AngularJS ng-repeat Directive

  • by
angularjs-ng-repeat-directive-tr-example

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>

VIEW DEMO

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.

angularjs-ng-repeat-directive-tr-exampleSimilarly we can use ng-repeat with div, li tag as well.


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>

VIEW DEMO

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.

div-angularjs-ng-repeat-usage

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>

VIEW DEMO

In the next part of this series we will learn about AngularJS services.

 


References: AngularJS API DOC