- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to display tables using AngularJS?
The data in tables are basically repeatable. In AngularJS, a better way to display tables is the ng-repeat directive. The ng-repeat directive will help us to loop through the array data in the DOM elements and helps us to display tables very easily.
Let’s check how to use ng-repeat for creating tables.
Ng-repeat
The ng-repeat directive repeats a set of HTML, a given number of times.
The set of HTML will be repeated once per item in a collection.
The collection must be an array or an object.
Syntax
<element ng-repeat=”expression”></element>
Here, to create tables follow given steps.
Set up an angularJs application.
Define the data for the table.
Using ng-repeat directive, iterate the data to display.
Display the data as a table
Style the data to look better.
Let’s look into code, how to display the table using ng-repeat.
Example
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Table creation using Angularjs
</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: "Tom",
id: 25,
role:'Tester'
}, {
name: "Thomas",
id: 29,
role: 'Developer'
}, {
name: "Jennie",
id: 26,
role:'UI Developer'
},
{
name: "Max",
id: 24,
role:'PO'
},
{
name: "Jon",
id: 21,
role:'TL'
}];
});
</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>Table creation using AngularJs</h2>
<table>
<tr>
<td>Name</td>
<td>Id</td>
<td>Role</td>
</tr>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.id}}</td>
<td>{{user.role}}</td>
</tr>
</table>
</div>
</body>
</html>
Here, we assigned some array of data and iterated each element and displayed it in a table form using ng-repeat directive. Here we added styling for the table also. We can also sort the table items using orderBy pipe. Let’s see an example below
Example
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Table creation using Angularjs
</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: "Tom",
id: 25,
role:'Tester'
}, {
name: "Thomas",
id: 29,
role:'Developer'
}, {
name: "Jennie",
id: 26,
role:'UI Developer'
},
{
name: "Max",
id: 24,
role:'PO'
},
{
name: "Jon",
id: 21,
role:'TL'
}];
});
</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>Table creation using AngularJs</h2>
<table>
<tr>
<td>Name</td>
<td>Id</td>
<td>Role</td>
</tr>
<tr ng-repeat="user in users | orderBy: 'id'">
<td>{{user.name}}</td>
<td>{{user.id}}</td>
<td>{{user.role}}</td>
</tr>
</table>
</div>
</body>
</html>
Here, we did sort by the Id column, using orderBy pipe we can sort the table columns.
Using ng-repeat directive we can display tables easily in angularjs.
1K+ Views
