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:
<element ng-repeat="expression">Content..<element>
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: