Improve this doc  View Source

orderBy

  1. - filter in module ng

Orders a specified array by the expression predicate.

Usage

In HTML Template Binding

{{ orderBy_expression | orderBy : array : expression : reverse}}

In JavaScript

$filter('orderBy')(array, expression, reverse)

Arguments

Param Type Details
array Array

The array to sort.

expression function(*)stringArray.<(function(*)|string)>

A predicate to be used by the comparator to determine the order of elements.

Can be one of:

  • function: Getter function. The result of this function will be sorted using the <, =, > operator.
  • string: An Angular expression which evaluates to an object to order by, such as 'name' to sort by a property called 'name'. Optionally prefixed with + or - to control ascending or descending sort order (for example, +name or -name).
  • Array: An array of function or string predicates. The first predicate in the array is used for sorting, but when two items are equivalent, the next predicate is used.
reverse
(optional)
boolean

Reverse the order of the array.

Returns

Array

Sorted copy of the source array.

Example

  Edit in Plunker
<script>
  function Ctrl($scope) {
    $scope.friends =
        [{name:'John', phone:'555-1212', age:10},
         {name:'Mary', phone:'555-9876', age:19},
         {name:'Mike', phone:'555-4321', age:21},
         {name:'Adam', phone:'555-5678', age:35},
         {name:'Julie', phone:'555-8765', age:29}]
    $scope.predicate = '-age';
  }
</script>
<div ng-controller="Ctrl">
  <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>
  <hr/>
  [ <a href="" ng-click="predicate=''">unsorted</a> ]
  <table class="friend">
    <tr>
      <th><a href="" ng-click="predicate = 'name'; reverse=false">Name</a>
          (<a href="" ng-click="predicate = '-name'; reverse=false">^</a>)</th>
      <th><a href="" ng-click="predicate = 'phone'; reverse=!reverse">Phone Number</a></th>
      <th><a href="" ng-click="predicate = 'age'; reverse=!reverse">Age</a></th>
    </tr>
    <tr ng-repeat="friend in friends | orderBy:predicate:reverse">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
    </tr>
  </table>
</div>