ng-repeat Directive is similar to foreach loop in C#.
The
ng-repeat directive is mainly used to repeat a set of HTML elements, for a given number of times.
This set of HTML element repeats once per item in a collection.
The collection should be an array or an object.
Please Copy paste the code below, the understand it better:
------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
angular.module('AppModule', [])
.controller('AppController', AppController);
function AppController() {
var vm = this;
//For All Employee
var allEmployees = [
{ firstname: "Ben", lastname: "Decosta", salary: 50000, id: 1 },
{ firstname: "Ten", lastname: "wecosta", salary: 40000, id: 2 },
{ firstname: "Sen", lastname: "xecosta", salary: 30000, id: 3 },
{ firstname: "Den", lastname: "qecosta", salary: 20000, id: 4 },
]
vm.allEmployees = allEmployees;
}
</script>
<title>ng-repeat Directive</title>
<style>
th,td{
padding:5px;
text-align:center;
vertical-align:top;
}
</style>
</head>
<body>
<!--Including Module and Controller-->
<div ng-app="AppModule" ng-controller="AppController as vm">
<table border="1" cellpadding="1" cellspacing="1" >
<thead>
<tr>
<th> First Name </th>
<th> Last Name</th>
<th> Salary </th>
<th> Id </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="eachEmployee in vm.allEmployees">
<td> {{eachEmployee.firstname}} </td>
<td> {{eachEmployee.lastname}} </td>
<td> {{eachEmployee.salary}} </td>
<td>{{eachEmployee.id}} </td>
</tr>
</tbody>
</table>
</div>
</body></html>
-------------------------------------------------------------------------------------------------------
Feel free to give any comments and queries...