AngularJs orderby filter is used to arrange the application data in a particular order.

AngularJs Orderby Example :

[html]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Angular Filter Example</title>
<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller("employeeCotroller", function($scope) {
        $scope.employees = ["rahul","johny","peater","chandra","james"]
    })
</script>
</head>
<body ng-app="myApp">
    <h1>AngularJs Orderby Filter Example</h1>
    <table ng-controller="employeeCotroller" border="2">
        <tr ng-repeat="employee in employees | orderBy:employee:false">
            <td>{{employee}}</td>
        </tr>
    </table>
</body>
</html>
[/html]

Output :

AngularJs Orderby Filter Example

chandra
james
johny
peater
rahul

AngularJs Orderby with User Input :

[html]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Angular Filter Example</title>
<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller("studentCotroller", function($scope) {
        $scope.students = [ {
            name : "chandrashekhar",
            course : "CoreJava",
        }, {
            name : "scott",
            course : "AngularJs",
        }, {
            name : "james",
            course : "JQuery",
        } , {
            name : "smith",
            course : "Spring",
        } , {
            name : "adam",
            course : "Hibernate",
        } , {
            name : "philips",
            course : "WebServices",
        } ]
    })
</script>
</head>
<body ng-app="myApp">
    <h1>AngularJs Orderby Filter</h1>
    Descending Order by Name ? : <input type="checkbox" ng-model="isDesc"/>
    <br><br>
    <table ng-controller="studentCotroller" border="2">
        <tr style="background-color:green">
            <td>Student Name</td>
            <td>Course Name</td>
        </tr>
        <tr ng-repeat="student in students | orderBy:’name’:isDesc">
            <td>{{student.name | uppercase}}</td>
            <td>{{student.course }}</td>
        </tr>
    </table>
</body>
</html>
[/html]

[advanced_iframe securitykey=”85899c43cd5d45b9ec5729b5189d1961d89f90d9″ src=”https://www.onlinetutorialspoint.com/AngularJsExamples/Angular_Orderby_Filter.html”]

About the Author:

Founder of onlinetutorialspoint.com Love Java, Python, Shell and opensource frameworks. Follow him on twitter and facebook for latest updates.

Leave A Comment