Monday , October 23 2017
Home / angularjs / AngularJs Orderby Filter Example

AngularJs Orderby Filter Example

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>

About chandrashekhar

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+ ,

Recommended

AngularJs Data Binding Example

One of the important feature of AngularJs is Data Binding. Data binding makes the AngularJs …

Leave a Reply

Your email address will not be published. Required fields are marked *