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

Open Compiler
<!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

Open Compiler
<!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.

Updated on: 2023-02-21T18:14:43+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements