AngularJs Orderby Filter Example

By | 2018-04-01T16:05:33+00:00 October 11th, 2016|angularjs|0 Comments

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

AngularJs Orderby Example :


<!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>

Output :

AngularJs Orderby Filter Example

chandra
james
johny
peater
rahul

AngularJs Orderby with User Input :


<!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>

Http iframes are not shown in https pages in many major browsers. Please read this post for details.

About the Author:

Hi Folks, you have reach this so far, that shows you like what you are learning. Then why don't you support us to improve for bettor tutorials by leaving your valuable comments and why not you keep in touch with us for latest updates on your favorite blog @ facebook , twitter , Or Google+ ,

Leave A Comment