Angular Tables

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>
1