AngularJS – Multiple Filters in Controller With Example

       There are 2 different methods of implementing filters in AngularJS. One is implementing the filter in html itself for rendering the various formats as we desire and another method is writing filter in controller using $filter service provider. In both methods we can implement our own custom filters. So in this post i’m going to explore use of multiple filters in controller with a realtime example. There is small story (Sorry it’s really needed 🙂 ) behind this post.

When i surf over the internet regarding AngularJS posts, i saw a comment under a post that asking for a help on his application. Below is the comment:

I’m new to Angular. I am building an application in which there’s a table whose fields are populated with ng-repeat. Thats a pretty big table with over 1000 rows and 20columns. I have one basic filter which filters the entire table. I want to set a filter for each column so that my filtering becomes easy. Can you help me aiming the same.
thanks in advance.

This is the story line, so here i’m gonna show you how to implement Multiple Filters which will be applied to each column of table. Our table having 9 columns and 5 rows. For time being i have just applied filters for 3 columns.  I have achieved this task in different way, it may so weird or a kind of repeated use of code that is very expensive. I will keep on trying this task to achieve in less expensive to use and will update this post if i succeeded.

multiple-filter-table

Here is the controller with static json values,


var app = angular.module('myapp',[]);

app.controller('MyCtrler', function ($scope,$filter)
{
  $scope.items = [
    {fname:'John', lname:'Hendry', empid:'34299', design:'Software Engineer', dept:'Development', salary:'35000', eligiblity:'yes', exp:'4', location:'Chennai'},
    {fname:'Steve', lname:'Job', empid:'11220', design:'Senior Software Engineer', dept:'Development', salary:'55000', eligiblity:'yes', exp:'6.5', location:'Noida'},
    {fname:'Joey', lname:'Philip', empid:'13997', design:'Analyst', dept:'Testing', salary:'38000', eligiblity:'No', exp:'3', location:'Pune'},
    {fname:'Mary', lname:'Brown', empid:'45553', design:'Quality Tester', dept:'Testing', salary:'27000', eligiblity:'yes', exp:'5', location:'Pune'},
    {fname:'Marylin', lname:'Mandro', empid:'31195', design:'Manager', dept:'Marketting', salary:'85000', eligiblity:'No', exp:'15', location:'Chennai'}
  ];

  $scope.items2 = $scope.items;

  $scope.$watch('fName', function(val)
  {
     $scope.items = $filter('filter')($scope.items2, {fname:val, lname:$scope.lName, empid:$scope.empId, design:$scope.designation, dept:$scope.deptmt, salary:$scope.mSal, eligiblity:$scope.vEligible, exp:$scope.expr, location:$scope.wLoc});
  });
  $scope.$watch('deptmt', function(val)
  {
     $scope.items = $filter('filter')($scope.items2, {fname:$scope.fName, lname:$scope.lName, empid:$scope.empId, design:$scope.designation, dept:val, salary:$scope.mSal, eligiblity:$scope.vEligible, exp:$scope.expr, location:$scope.wLoc});
  });
  $scope.$watch('vEligible', function(val)
  {
     $scope.items = $filter('filter')($scope.items2, {fname:$scope.fName, lname:$scope.lName, empid:$scope.empId, design:$scope.designation, dept:$scope.deptmt, salary:$scope.mSal, eligiblity:val, exp:$scope.expr, location:$scope.wLoc});
  });
});

 

In the above code $scope.items is static json array. I have duplicated the array into $scope.items2 to use it in filtering process. Then i have used watcher service for each filters. When there is a change in any of the filter (a textbox under each column heading) then the corresponding watcher will be triggered.

Inside the watch service (this part is the weird thing) i have used all the column filter scope value (this will be set as ng-model in html code). For example, if we are going to filter based on first name then the watcher for ‘fName‘ (ng-model="fName") will be triggered. So we catched that fName value and set as a filter value as below, other filters will be normal $scope values (other field values).

{
 fname:val, 
 lname:$scope.lName,
 empid:$scope.empId,
 design:$scope.designation,
 dept:$scope.deptmt,
 salary:$scope.mSal,
 eligiblity:$scope.vEligible,
 exp:$scope.expr,
 location:$scope.wLoc
}

Let’s see our HTML code, then you will get the clear idea.

 

<body ng-app="myapp">
    <div ng-controller="MyCtrler">
        <table border="1">
        <tr>
            <th>First Name <input type="text" ng-model="fName"></th>
            <th>Last Name <input type="text" ng-model="lName"></th>
            <th>Emp ID <input type="text" ng-model="empId"></th>
            <th>Designation <input type="text" ng-model="designation"></th>
            <th>Department <input type="text" ng-model="deptmt"></th>
            <th>Monthly Salary <input type="text" ng-model="mSal"></th>
            <th>Eligible for Visa <input type="text" ng-model="vEligible"></th>
            <th>Years of Experience <input type="text" ng-model="expr"></th>
            <th>Work Location <input type="text" ng-model="wLoc"></th>
        </tr>
        <tr ng-repeat="item in items">
            <td>{{item.fname}}</td>
            <td>{{item.lname}}</td>
            <td>{{item.empid}}</td>
            <td>{{item.design}}</td>
            <td>{{item.dept}}</td>
            <td>{{item.salary}}</td>
            <td>{{item.eligiblity}}</td>
            <td>{{item.exp}}</td>
            <td>{{item.location}}</td>
        </tr>
        </table>
    </div>
</body>

 

I’m done with it. If you need more clarification please feel free to ask me.

Happy Filtering !!


 

 

One thought on “AngularJS – Multiple Filters in Controller With Example

  1. I have been exploring for a bit for any high quality articles or blog posts in this kind of house . Exploring in Yahoo I at last stumbled upon this site. Reading this info So i’m satisfied to show that I’ve a very good uncanny feeling I came upon just what I needed. I such a lot for sure will make sure to do not put out of your mind this web site and give it a glance on a continuing basis.

Leave a Reply

Your email address will not be published.