AngularJS | Tables (original) (raw)

Last Updated : 16 Oct, 2019

The data in tables are basically repeatable, so you can use ng-repeat directives to create tables easily
The example will clear the approach.

Syntax:

Content..

Displayed Data in table.

<!DOCTYPE html>

< html >

< head >

`` < title >AngularJS ng-repeat Directive</ title >

</ head >

< body >

`` < center >

`` < h1 style = "color:green;" >GeekforGeeks</ h1 >

`` < table >

`` < tr >

`` < th >Course</ th >

`` < th >Duration</ th >

`` </ tr >

`` < tr ng-repeat = "subject in student.subjects" >

`` < td >{{ Course.name }}</ td >

`` < td >{{ Duration.time }}</ td >

`` </ tr >

`` </ table >

`` </ center >

</ body >

</ html >

Output:

Displayed with CSS style

< style >

`` table, th , td {

`` border: 1px solid black;

`` border-collapse: collapse;

`` padding: 5px;

`` }

`` table tr:nth-child(odd) {

`` background-color: #82E0AA ;

`` }

`` table tr:nth-child(even) {

`` background-color: #2ECC71 ;

`` }

`` h1{

`` color:green;

`` }

</ style >

AnhularJS ng-repeat directives Example with the above codes: Here you will see the combination of above html and css with the AngularJS ng-repeat directives.

<!DOCTYPE html>

< html >

`` < head >

`` < title >Angular JS Table</ title >

`` < script src =

`` </ script >

`` < style >

`` table, th , td {

`` border: 1px solid black;

`` border-collapse: collapse;

`` padding: 5px;

`` }

`` table {

`` background-color: grey;

`` }

`` h1{

`` color:green;

`` }

`` </ style >

`` </ head >

`` < body >

`` < center >

`` < h1 >GeeksforGeeks</ h1 >

`` < div ng-app = "mainApp" ng-controller = "studentController" >

`` < table border = "0" >

`` < tr >

`` < td >Enter first name:</ td >

`` < td >< input type = "text" ng-model = "student.firstName" ></ td >

`` </ tr >

`` < tr >

`` < td >Enter last name: </ td >

`` < td >

`` < input type = "text" ng-model = "student.lastName" >

`` </ td >

`` </ tr >

`` < tr >

`` < td >Name: </ td >

`` < td >{{student.fullName()}}</ td >

`` </ tr >

`` < tr >

`` < td >Subject:</ td >

`` < td >

`` < table >

`` < tr >

`` < th >Name</ th >.

`` < th >Marks</ th >

`` </ tr >

`` < tr ng-repeat = "subject in student.subjects" >

`` < td >{{ subject.name }}</ td >

`` < td >{{ subject.marks }}</ td >

`` </ tr >

`` </ table >

`` </ td >

`` </ tr >

`` </ table >

`` </ div >

`` < script >

`` var mainApp = angular.module("mainApp", []);

`` mainApp.controller('studentController', function($scope) {

`` $scope.student = {

`` firstName: "Pranab",

`` lastName: "Mukherjee",

`` subjects:[

`` {name:'Algorithm',marks:70},

`` {name:'Data Structure',marks:80},

`` {name:'Architecture',marks:65},

`` {name:'Digital Analog',marks:75}

`` ],

`` fullName: function() {

`` var studentObject;

`` studentObject = $scope.student;

`` return studentObject.firstName + " " + studentObject.lastName;

`` }

`` };

`` });

`` </ script >

`` </ center >

`` </ body >

</ html >

Output:

Similar Reads

AngularJS Basics