orderBy

- 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 as expected, make sure they are actually being saved as numbers and not strings. Array-like values (e.g. NodeLists, jQuery objects, TypedArrays, Strings, etc) are also supported.

Usage

In HTML Template Binding

{{ orderBy_expression | orderBy : expression : reverse}}

In JavaScript

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

Arguments

Param Type Details

array

Param	Type	Details
array	Array	The array (or array-like object) to sort.
expression	function()string Array.<(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.

Array

The array (or array-like object) to sort.

expression

function(*)string Array.<(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

The example below demonstrates a simple ngRepeat, where the data is sorted by age in descending order (predicate is set to '-age'). reverse is not set, which means it defaults to false.

<div ng-controller="ExampleController">
  <table class="friend">
    <tr>
      <th>Name</th>
      <th>Phone Number</th>
      <th>Age</th>
    </tr>
    <tr ng-repeat="friend in friends | orderBy:'-age'">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
    </tr>
  </table>
</div>

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}];
}]);

Load online demo

The predicate and reverse parameters can be controlled dynamically through scope properties, as shown in the next example.

<div ng-controller="ExampleController">
  <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>
  <hr/>
  <button ng-click="predicate=''">Set to unsorted</button>
  <table class="friend">
    <tr>
     <th>
         <button ng-click="order('name')">Name</button>
         <span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
     </th>
     <th>
         <button ng-click="order('phone')">Phone Number</button>
         <span class="sortorder" ng-show="predicate === 'phone'" ng-class="{reverse:reverse}"></span>
     </th>
     <th>
         <button ng-click="order('age')">Age</button>
         <span class="sortorder" ng-show="predicate === 'age'" ng-class="{reverse:reverse}"></span>
     </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>

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';
  $scope.reverse = true;
  $scope.order = function(predicate) {
    $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
    $scope.predicate = predicate;
  };
}]);

.sortorder:after {
  content: '\25b2';
}
.sortorder.reverse:after {
  content: '\25bc';
}

Load online demo

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:

<div ng-controller="ExampleController">
  <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>
  <table class="friend">
    <tr>
      <th>
          <button ng-click="order('name')">Name</button>
          <span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
      </th>
      <th>
          <button ng-click="order('phone')">Phone Number</button>
          <span class="sortorder" ng-show="predicate === 'phone'" ng-class="{reverse:reverse}"></span>
      </th>
      <th>
          <button ng-click="order('age')">Age</button>
          <span class="sortorder" ng-show="predicate === 'age'" ng-class="{reverse:reverse}"></span>
      </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) {
    $scope.predicate = predicate;
    $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
    $scope.friends = orderBy($scope.friends, predicate, $scope.reverse);
  };
  $scope.order('age', true);
}]);

.sortorder:after {
  content: '\25b2';
}
.sortorder.reverse:after {
  content: '\25bc';
}

Load online demo