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:

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:

Jacob Frazier

Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.