Using
ng-repeat directive you can iterate over arrays and objects and draw table with repeatable data and display it the html page as tabular format.
snippet
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr ng-repeat = "x in employees">
<td>{{ x.name }}</td>
<td>{{ x.age }}</td>
</tr>
</table>
You can apply css style.
snippet
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
Display Serial No. with Table Index ($index)
snippet
<table>
<tr>
<th>#S.No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr ng-repeat = "x in employees">
<td>{{ $index + 1 }}</td>
<td>{{ x.name }}</td>
<td>{{ x.age }}</td>
</tr>
</table>
Apply style Using $even and $odd
snippet
<table>
<tr ng-repeat="x in employees">
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
<td ng-if="$even">{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Age }}</td>
<td ng-if="$even">{{ x.Age }}</td>
</tr>
</table>
