AngularJS Tables

embed external html pages

In AngularJS Tables we can show repeatable data. Using ng-repeat directive we can draw table easily. See the below example how to use ng-repeat in table.

Table data is normally repeatable by default and ng-repeat directive can be used perfectly to create table easily.

Example of AngularJS Tables:

   <tr ng-repeat="x in user">
      <td>{{ }}</td>
      <td>{{ x.age }}</td>

Read Also: HTML DOM – AngularJS


John Doe25
Jane Doe21
Robert Stuart35

To sort the table, add an orderBy filter:

<tr ng-repeat="x in user | orderBy : 'name'">
 <td>{{ }}</td>
 <td>{{ x.age }}</td>

In order to display the table index, use <td> with $index:

<tr ng-repeat="x in user">
<td>{{ $index + 1 }}</td>
<td>{{ }}</td> 
<td>{{ x.age }}</td> 

For example:

1John Doe25
2Jane Doe21
3Robert Stuart35

One thought on “AngularJS Tables”

Leave a Reply

Your email address will not be published. Required fields are marked *