AngularJS orderBy Filter

Last Updated : 01 Aug, 2022

An orderBy Filter in AngularJS is used to sort the given array to the specific order. The default order of sorting the string is in alphabetical order whereas the numbers are numerically sorted. By default, all the items are sorted in ascending order, if the ordering sequence is not specified.

Syntax:

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

Parameter Values:

expression: This parameter value can be used to determine the order while filtering the items. It can be the following types:
- Function: This function is invoked by passing each item as an argument & the returned value will be utilized for sorting the corresponding items.
- String: It can be an expression in AngularJS, that will be evaluated for every item & the output will be utilized to sort the item.
- Array: It can be utilized when we need to determine more than 1 object property that helps to organize the sorting order. The array item can contain both the string & function.
reverse: It is an optional parameter that will be required to reverse the order of the array if its value is set to true.

Example 1: This example describes the orderBy Filter in Angular JS by specifying the order sequence for the array item by name.

HTML

<!DOCTYPE html>
<html>

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
    </script>
</head>

<body>
    <div ng-app="myApp" 
         ng-controller="orderCtrl">
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
        <h3>AngularJS orderBy Filter</h3>
        <ul>
            <li ng-repeat=
        "x in customers | orderBy : 'name'">
                 {{x.name + ", " + x.city}} 
            </li>
        </ul>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('orderCtrl', function($scope) {
            $scope.customers = [{
                "name": "Amber",
                "city": "ajmer"
            }, {
                "name": "lakshay ",
                "city": "vizag"
            }, {
                "name": "karan",
                "city": "London"
            }, {
                "name": "bhaskar",
                "city": "peshawar"
            }, ];
        });
    </script>
    
<p>The array items are arranged by "name".</p>

</body>
</html>

Output :

Example 2: This example describes the AngularJS orderBy Filter illustrating an order by case when we go through gdp by "-" and "+" orderBy.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        AngularJS orderBy Filters 
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    <style>
        .tabled {
            float: left;
            padding: 10px;
        }
    </style>
</head>

<body ng-app="orderByDemo">
    <div style="text-align:center">
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
        <h3>
            AngularJS orderBy Filter
        </h3> 
     </div>
    <script>
        angular.module('orderByDemo', [])
            .controller('orderByController', 
                ['$scope', function($scope) {
            $scope.countries = [{
                name: 'SPAIN',
                states: '78',
                gdp: 5
            }, {
                name: 'FRANCE',
                states: '46',
                gdp: 4
            }, {
                name: 'PORTUGAL',
                states: '53',
                gdp: 3
            }, {
                name: 'CHILE',
                states: '06',
                gdp: 2
            }, {
                name: 'RUSSIA',
                states: '21',
                gdp: 1
            }];
        }]);
    </script>
    <div ng-controller="orderByController">
        <table class="tabled">
            <tr>
                <th>Name</th>
                <th>No of States</th>
                <th>GDP(descending)</th>
            </tr>
            <!-- orderBy Descending (-) -->
            <tr ng-repeat="country in countries | orderBy:'-gdp'">
                <td>{{country.name}}</td>
                <td>{{country.states}}</td>
                <td>{{country.gdp}}</td>
            </tr>
        </table>
        <table class="tabled">
            <tr>
                <th>Name</th>
                <th>No of States</th>
                <th>GDP(ascending)</th>
            </tr>
            <!-- orderBy Ascending (+) -->
            <tr ng-repeat="country in countries | orderBy:'gdp'">
                <td>{{country.name}}</td>
                <td>{{country.states}}</td>
                <td>{{country.gdp}}</td>
            </tr>
        </table>
    </div>
</body>
</html>

Output:

Example 3: This example describes the AngularJS orderBy Filter that illustrates the sorting of the array items by country.

HTML

<!DOCTYPE html>
<html>

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<body>
    <div ng-app="myApplication" 
         ng-controller="orderCtrl">
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
        <h3>AngularJS orderBy Filter</h3>
        <ul>
            <li ng-repeat=
            "x in sevenwonder | orderBy : '-country'">
                 {{x.name + ", " + x.country}}
            </li>
        </ul>
    </div>
    <script>
        var application = angular.module('myApplication', []);
        application.controller('orderCtrl', function($scope) {
            $scope.sevenwonder = [{
                "name": "Great Wall of China",
                "country": "China"
            }, {
                "name": "Christ the Redeemer Statue",
                "country": "Brazil"
            }, {
                "name": "Machu Picchu",
                "country": "peru"
            }, {
                "name": "Chichen Itza ",
                "country": "Mexico"
            }, {
                "name": "The Roman Colosseum",
                "country": "Rome"
            }, {
                "name": "Taj Mahal",
                "country": "India"
            }, {
                "name": "Petra",
                "country": "Jordan"
            }];
        });
    </script>
    
<p>The array items are sorted by "country".</p>

</body>
</html>