AngularJS Orderby Filter

Kailash Chandra Behera | Tuesday, February 07, 2017

Introduction

We demonstrated in my previous blog 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