Use AngularJS OrderBy Filter in Controller


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


6 comments:

  1. Excellent article for the people who need information about this course.
    Angularjs Certification Online
    Learn Angularjs Online

    ReplyDelete
  2. valuable blog,Informative content...thanks for sharing, Waiting for the next update...
    Cyber Security Course in Chennai
    Cyber Security Training in Chennai

    ReplyDelete
  3. Share great information about your blog , Blog really helpful for us . Hosted Phone Systems

    ReplyDelete
  4. Thanks 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.

    ecommerce catalogue management services

    ecommerce services provider in india

    ReplyDelete
  5. How to bet on esports games: Top 10 tips for
    The 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

    ReplyDelete