WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS orderBy Filter


Example

Display the things alphabetically:

<div ng-app="myApp" ng-controller="orderCtrl">

<ul>
<li ng-repeat="x in vehicles | orderBy">{{x}}</li>
</ul>

</div>

<script>
var application = angular.module('myApp', []);
app.controller('orderCtrl', function($scope) {
    $scope.cars = ["Dodge", "Fiat", "Audi", "Volvo", "BMW", "Ford"];
});
</script>
Try it yourself »

Definition and Usage

The orderBy channel enables us to sort an array.

By default, strings are arranged sequentially, and numbers are arranged numerically.


Syntax

{{ array | orderBy : expression : reverse }}

Parameter Values

Value Description
expression The articulation used to decide the request. The articulation can be of type:

String: If the cluster is a variety of articles, you can sort the cluster by the estimation of one of the item properties. See the precedents below.

Function: You can make a capacity to arrange the sorting.

Array: Use a cluster in the event that you need more than one article property to decide the arranging request. The cluster things can be the two strings and capacities.
reverse Optional. Set to genuine on the off chance that you need to turn around the request of the array.

More Examples

Example

Sort the exhibit by "city":

<div ng-app="myApp" ng-controller="orderCtrl">

<ul>
<li ng-repeat="x in clients | orderBy : 'city'">{{x.name + ", " + x.city}}</li>
</ul>

</div>

<script>
var application = angular.module('myApp', []);
app.controller('orderCtrl', function($scope) {
    $scope.customers = [
        {"name" : "Bottom-Dollar Marketse" ,"city" : "Tsawassen"},
        {"name" : "Alfreds Futterkiste", "city" : "Berlin"},
        {"name" : "Bon app", "city" : "Marseille"},
        {"name" : "Cactus Comidas para llevar", "city" : "Buenos Aires"},
        {"name" : "Bolido Comidas preparadas", "city" : "Madrid"},
        {"name" : "Around the Horn", "city" : "London"},
        {"name" : "B's Beverages", "city" : "London"}
    ];
});
</script>
Try it yourself »

Example

Sort the exhibit by "city", in plunging order:

<div ng-app="myApp" ng-controller="orderCtrl">

<ul>
<li ng-repeat="x in clients | orderBy : '-city'">{{x.name + ", " + x.city}}</li>
</ul>

</div>

<script>
var application = angular.module('myApp', []);
app.controller('orderCtrl', function($scope) {
    $scope.customers = [
        {"name" : "Bottom-Dollar Marketse" ,"city" : "Tsawassen"},
        {"name" : "Alfreds Futterkiste", "city" : "Berlin"},
        {"name" : "Bon app", "city" : "Marseille"},
        {"name" : "Cactus Comidas para llevar", "city" : "Buenos Aires"},
        {"name" : "Bolido Comidas preparadas", "city" : "Madrid"},
        {"name" : "Around the Horn", "city" : "London"},
        {"name" : "B's Beverages", "city" : "London"}
    ];
});
</script>
Try it yourself »

Related Pages

AngularJS Tutorial: Angular Filters