Curriculum

Course: AngularJS

Login

Curriculum

AngularJS

AngularJS Tutorial

0/65

Text lesson

Displaying with CSS Style

To enhance its appearance, include some CSS on the page.

CSS Style

<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}

table tr:nth-child(odd) {
background-color: #f1f1f1;
}

table tr:nth-child(even) {
background-color: #ffffff;
}
</style>

Display with orderBy Filter

To sort the table, include an orderBy filter.

AngularJS Example

<table>
  <tr ng-repeat=”x in names | orderBy : ‘Country'”>
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>