AngularJS: API: ng/filter/orderBy


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

ParamTypeDetails
arrayArray

The array to sort.

expressionfunction(*)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

index.html
<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:

index.html
<div ng-controller="Ctrl">
  <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>
script.js
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);
  }]);