AngularJS Tables

by Online Tutorials Library July 14, 2022

AngularJS Tables

The ng-repeat directive is used to draw tables in AngularJS. Displaying tables with AngularJS is very easy and simple.

Let’s take an example. This example use ng-repeat directive to draw a table.

See this example:

<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>
<p> </p>

Displaying with CSS style

You can also style the tables by using CSS.

See this example:

AngularJS Table example with CSS

                 <title>Angular JS Table</title>       <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" id="1e251a830ced8d8df4ddd016b5ffcf57" type="PenciLazyScript"></script>                              
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="studentController">
<table border="0">
<tr>
<td>Enter first name:</td>
<td><input ng-model="student.firstName" type="text"></td>
</tr>
<tr>
<td>Enter last name: </td>
<td>                   <input ng-model="student.lastName" type="text">                </td>
</tr>
<tr>
<td>Name: </td>
<td>{{student.fullName()}}</td>
</tr>
<tr>
<td>Subject:</td>
<td>
<table>
<tr>
<th>Name</th>
<p>.                         </p>
<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>
<p>                     </p>

Test it Now

Next TopicAngularJS Select

AngularJS Tables

AngularJS Tables

Displaying with CSS style

AngularJS Table example with CSS

AngularJS AJAX

Cordova App Templates

You may also like