Displaying and Formatting Data
The orderBy filter is easy and intuitive to use so we can immediately dive into the
code example, without spending too much time on theoretical introductions. Firstly
we will make sorting work and then add sorting indicators. Here is relevant part of
markup taking part in sorting:
<thead>
<th ng-click="sort('name')">Name</th>
<th ng-click="sort('desc')">Description</th>...
...
The actual sorting is taken care of by the orderBy filter, which in our example takes
two arguments:
- sortField: a property name to be used as a sorting predicate
- sort order (reverse): this argument indicates if a sorted array should
be reversed
The sort function, triggered by a click event on a cell header, is responsible for
selecting the sort field as well as toggling sort direction. Here are relevant bits of
the controller's code:
$scope.sortField = undefined;
$scope.reverse = false;$scope.sort = function (fieldName) {
if ($scope.sortField === fieldName) {
$scope.reverse = !$scope.reverse;
} else {
$scope.sortField = fieldName;
$scope.reverse = false;
}
};