AngularJS OrderBy Filter with Example

  Total Views : 789
  Comments : 0
 
  Keywords : Angularjs orderby filter function example, Sort values using orderby filter in angularjs, Angularjs orderby filter to sort values ascending or descending order with example

Here we will learn what is angularjs orderby filter, use of orderby filter in angularjs and how to use orderby filter in angularjs to sort elements in ascending or descending order with example.

AngularJS OrderBy Filter

In angularj orderby filter is used to sort array elements (like javascript objects, strings, list objects) either in ascending or descending order based on our requirement.

Syntax of OrderBy Filter in AngularJS

Following is the syntax of using orderby filter in angularjs applications.

 

{{orderbyexpression | orderBy : expression}}

We will see how to use orderby filter in angularjs with simple example.

Example of OrderBy Filter in AngularJS

Following is the example of orderby filter in angularjs to sort array items in both ascending order and descending order.

 

Live Preview

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>

AngularJs OrderBy filter Example

</title>

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

<script>

var app = angular.module("AngularOrderByApp", []);

app.controller("orderbyctrl", function ($scope) {

$scope.users = [{

name: "Madhav Sai",

age: 11

}, {

name: "Suresh Dasari",

age: 29

}, {

name: "Rohini Alavala",

age: 29

}, {

name: "Praveen Kumar",

age: 24

}];

});

</script>

</head>

<body ng-app="AngularOrderByApp">

<div ng-controller="orderbyctrl">

<p>OrderBy Name in Ascending Order</p>

<ul ng-repeat="user in users | orderBy : 'name'">

<li>{{user.name}}</li>

</ul>

<p>OrderBy Name in Descending Order</p>

<ul ng-repeat="user in users | orderBy : 'name' : true">

<li>{{user.name}}</li>

</ul>

</div>

</body>

</html>

If you observe above code we written two conditions one for ascending order and another for descending order. For ascending order we applied orderBy:'name' to ng-repeat and for descending order we applied orderBy:'name':true to ng-repeat. We run this angularjs application and will see the output.

Output of AngularJS OrderBy Filter Example

Following is the result of using orderby filter in angularjs applications.

 

OrderBy Name in Ascending Order

 

  • Madhav Sai
  • Praveen Kumar
  • Rohini Alavala
  • Suresh Dasari

OrderBy Name in Descending Order

 

  • Suresh Dasari
  • Rohini Alavala
  • Praveen Kumar
  • Madhav Sai

 This is how we will use orderBy filter in angularjs application to sort array list elements either in ascending or descending order. 

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User