AngularJS Tables

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:

<table>
   <tr>
      <th>Name</th>
      <th>Age</th>
   </tr>
   <tr ng-repeat="x in user">
      <td>{{ x.name }}</td>
      <td>{{ x.age }}</td>
   </tr>
</table>

Read Also: HTML DOM – AngularJS

OutPut:

Name	Age
John Doe	25
Jane Doe	21
Robert Stuart	35

To sort the table, add an orderBy filter:

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

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

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

For example:

No.	Name	Age
1	John Doe	25
2	Jane Doe	21
3	Robert Stuart	35