Improve this Doc  View Source

orderBy

  1. - filter in module ng

Orders a specified array by the expression predicate. It is ordered alphabetically for strings and numerically for numbers. Note: if you notice numbers are not being sorted correctly, make sure they are actually being saved as numbers and not strings.

Usage

In HTML Template Binding

{{ orderBy_expression | orderBy : 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. The result of this expression is used to compare elements (for example name to sort by a property called name or name.substr(0, 3) to sort by 3 first characters of a property called name). The result of a constant expression is interpreted as a property name to be used in comparisons (for example "special name" to sort object by the value of their special name property). An expression can be optionally prefixed with + or - to control ascending or descending sort order (for example, +name or -name). If no property is provided, (e.g. '+') then the array element itself is used to compare where sorting.

  • 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.

    If the predicate is missing or empty then it defaults to '+'.
reverse
(optional)
 boolean

Reverse the order of the array.

Returns

Array

Sorted copy of the source array.

Example

  Edit in Plunker 
<script>
  angular.module('orderByExample', [])
    .controller('ExampleController', ['$scope', function($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="ExampleController">
  <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>

It's also possible to call the orderBy filter manually, by injecting $filter, retrieving the filter routine with $filter('orderBy'), and calling the returned filter routine with the desired parameters.

Example:

  Edit in Plunker 
<div ng-controller="ExampleController">
  <table class="friend">
    <tr>
      <th><a href="" ng-click="reverse=false;order('name', false)">Name</a>
        (<a href="" ng-click="order('-name',false)">^</a>)</th>
      <th><a href="" ng-click="reverse=!reverse;order('phone', reverse)">Phone Number</a></th>
      <th><a href="" ng-click="reverse=!reverse;order('age',reverse)">Age</a></th>
    </tr>
    <tr ng-repeat="friend in friends">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
    </tr>
  </table>
</div>
angular.module('orderByExample', [])
.controller('ExampleController', ['$scope', '$filter', function($scope, $filter) {
  var orderBy = $filter('orderBy');
  $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.order = function(predicate, reverse) {
    $scope.friends = orderBy($scope.friends, predicate, reverse);
  };
  $scope.order('-age',false);
}]);