In this AngularJS example you will learn how to display data in table format using ng-repeat in HTML Table.
Here you can view the output of the example and you can also "try it yourself" by clicking on "Try Now" button given at the bottom.
<table>
<th>Name</th><th>Last Name</th><th>Designation</th>
<th>Salary</th><th>Phone</th>
<tr ng-repeat="emp in employees">
<td>{{ emp.firstName }}</td>
<td>{{ emp.lastName }}</td>
<td>{{ emp.jobTitle }}</td>
<td>{{ emp.salary }}</td>
<td>{{ emp.phone }}</td>
</tr>
</table>
Example Display Data in HTML Table
<!DOCTYPE html>
<html>
<head> <!-- www.techstrikers.com -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
<meta charset="utf-8">
<title>AngularJS Display data in table format code Example</title>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
background-color:#FFFFFF;
font-family:arial;
}
</style>
<script>
var app = angular.module('app', []);
app.controller("appController", function ($scope) {
$scope.employees = [{
firstName:"Pooja",
lastName:"Singh",
jobTitle:"Developer",
salary:20000,
phone:"345-333-7845"
},
{
firstName:"Madhu",
lastName:"Kunj",
jobTitle:"Lead",
salary:30000,
phone:"8981392877"
},
{
firstName:"Harivansh",
lastName:"Singh",
jobTitle:"QA",
salary:35000,
phone:"9852348756"
},
}];
});
</script>
</head>
<body style="background-color:#DDE4E9;font-family:arial;">
<fieldset style="background-color:#DDE4E9;">
<legend>AngulerJS Display data in table format code Example</legend>
<div ng-app="app">
<div ng-controller="appController">
<table>
<th>Name</th><th>Last Name</th><th>Designation</th>
<th>Salary</th><th>Phone</th>
<tr ng-repeat="emp in employees">
<td>{{ emp.firstName }}</td>
<td>{{ emp.lastName }}</td>
<td>{{ emp.jobTitle }}</td>
<td>{{ emp.salary }}</td>
<td>{{ emp.phone }}</td>
</tr>
</table>
</div>
</div>
</div>
</fieldset>
</body>
</html>