How to Create Angular Tables?

Angular Table with Examples

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

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

Output

Watch this Full Stack Web Development Course video:

Angular Tables

output7

About the Author

Ayaan Alam

Software Developer | Technical Research Analyst Lead | Full Stack & Cloud Systems

Ayaan Alam is a skilled Software Developer and Technical Research Analyst Lead with 2 years of professional experience in Java, Python, and C++. With expertise in full-stack development, system design, and cloud computing, he consistently delivers high-quality, scalable solutions. Known for producing accurate and insightful technical content, Ayaan contributes valuable knowledge to the developer community.