AngularJS Table with ng-repeat Example

Keywords : Angularjs tables example, Angularjs use ng-repeat with table rows example, Angularjs bind table with ng-repeat example

Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
AngularJs Tables Example with ng-repeat Directive
</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("tablesApp", []);
app.controller("tablesCtrl", function ($scope) {
$scope.users = [{
name: "Madhav Sai",
age: 30,
location:'Nagpur'
}, {
name: "Suresh Dasari",
age: 29,
location:'Chennai'
}, {
name: "Rohini Alavala",
age: 29,
location:'Chennai'
}, {
name: "Praveen Kumar",
age: 24,
location:'Bangalore'
}];
});
</script>
<style type="text/css">
table, tr , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 3px;
}
</style>
</head>
<body ng-app="tablesApp">
<div ng-controller="tablesCtrl">
<h2>AngularJS Tables Example</h2>
<table>
<tr>
<td>Name</td>
<td>Age</td>
<td>Location</td>
</tr>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.location}}</td>
</tr>
</table>
</div>
</body>
</html>

AngularJS Table with ng-repeat Example

Example

Result