Introduction
We demonstrated in my previous article how to use orderBy filter in HTML. This article demonstrates how to use orderBy filter in JavaScript with controller.
Getting Started
This example is doing same things like the example in my previous article, but uses $filter() method for sorting table data. The sort button sorts the table record, it contains a function called sortBy() which sorts data using $filter() method. sortBy function takes selected item from DropdownBox which contains list of column names for sorting and calls $filter(). For details see the below example.
Example
<HTML ng-app = "myapp">
<TITLE> AngularJS learning(orderBy Filter)</TITLE>
<script src="angular.min.js"></script>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myappcont",function($scope,$filter){
$scope.colname="Name";
$scope.students=[
{Name:"Kailash",Sex:"Male",Class:"1Std",Section:"A"},
{Name:"Kalyan",Sex:"Male",Class:"1Std",Section:"A"},
{Name:"Kalyani",Sex:"Female",Class:"1Std",Section:"A"},
{Name:"Kamal",Sex:"Male",Class:"2Std",Section:"B"},
{Name:"Keshav",Sex:"Male",Class:"2Std",Section:"B"},
{Name:"KedarGouri",Sex:"Female",Class:"2Std",Section:"B"}];
$scope.students = $filter('orderBy')($scope.students, $scope.colname,true);
$scope.sortBy=function(){
$scope.students = $filter('orderBy')($scope.students, $scope.colname,false);
}
});
</script>
<BODY ng-controller="myappcont">
<h2>Student Details</h2>
<hr/>
<table border="1">
<caption>
Sort By : <select ng-model="colname">
<option value="Name">Name Asc</option>
<option value="-Name">Name Desc</option>
<option value="Sex">Sex Asc</option>
<option value="-Sex">Sex Desc</option>
<option value="Class">Class Asc</option>
<option value="-Class">Class Desc</option>
<option value="Section">Section Asc</option>
<option value="-Section">Section Desc</option>
</select> <button ng-click="sortBy()">Sort</button>
<br/><br/>
</caption>
<tr>
<th>Name</input></th>
<th>Sex</th>
<th>Class</th>
<th>Section</th>
</tr>
<tr ng-repeat="student in students">
<td>{{student.Name}}</td>
<td>{{student.Sex}}</td>
<td>{{student.Class}}</td>
<td>{{student.Section}}</td>
</tr>
</table>
</BODY>
</HTML>
Summary
This article demonstrates how to use $filter() or orderBy in controller, hope this article my helpful to you.
Thanks
Kailash Chandra Behera
Useful Information..!!! Best blog with effective information’s..!!
ReplyDeleteRPA course in Chennai
Android Course in Chennai
Angularjs course in Chennai
.net coaching centre in chennai
Hacking Course in Chennai
Digital Marketing Training in Chennai
Share great information about your blog , Blog really helpful for us . Hosted Phone Systems
ReplyDeleteThanks for sharing this article here about the church book publishing services. Your article is very informative and I will share it with my other friends as the information is really very useful. Keep sharing your excellent work.
ReplyDeleteecommerce catalogue management services
ecommerce services provider in india
How to bet on esports games: Top 10 tips for
ReplyDeleteThe most popular esports betting strategies include: With the popularity of eSports in South Korea, it's important to note kirill-kondrashin that the 카지노 major game