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=”http://nhk.e6a.mytemp.website/AngularJsExamples/Angular_Orderby_Filter.html”]
