• Articles
  • Tutorials
  • Interview Questions
Home > Blog > Tutorials > Angular Tables

Angular Tables

Angular Table with Examples

Directive ng-repeat is used to draw table easily.
e.g. 

<html>
<head>
<title>Angular JS Table</title>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<style>
table, th , td {
border: 1px solid black;
padding: 4px;
}
</style>
</head>
<body>
<h2>AngularJS Tables</h2>
<div ng-app = "details" ng-controller = "studentController">
<table>
<tr>
<th>Subject Name</th>
<th>Marks</th>
</tr>
<tr ng-repeat = "subject in student.subjects">
<td ng-if="$odd" style="background-color:#ff6600">{{ subject.name }}</td>
<td ng-if="$even">{{ subject.name }}</td>
<td ng-if="$odd" style="background-color:#ff6600">{{ subject.marks }}</td>
<td ng-if="$even">{{ subject.marks }}</td>
</tr>
</table>
</td>
</div>
<script>
var details= angular.module("details", []);
details.controller('studentController', function($scope) {
$scope.student = {
subjects:[
{name:'English',marks:85},
{name:'Math',marks:90},
{name:'Physics',marks:80},
{name:'Chemistry',marks:75}
]
};
});
</script>
</body>
</html>

Output

Watch this Full Stack Web Development Course video:

Video Thumbnail

Angular Tables

output7

Course Schedule

Name Date Details
Web Development Courses 23 Nov 2024(Sat-Sun) Weekend Batch View Details
30 Nov 2024(Sat-Sun) Weekend Batch
07 Dec 2024(Sat-Sun) Weekend Batch

About the Author

Kislay
Kislay
Technical Research Analyst - Full Stack Development

Kislay is a Technical Research Analyst and Full Stack Developer with expertise in crafting Mobile applications from inception to deployment. Proficient in Android development, IOS development, HTML, CSS, JavaScript, React, Angular, MySQL, and MongoDB, he’s committed to enhancing user experiences through intuitive websites and advanced mobile applications.