Solved

How to Chain multiple custom filters with AngualrJS

Posted on 2016-11-28
3
117 Views
Last Modified: 2016-11-28
HI

How can i chain multiple filters using AngularJS. My case is i have 3 dropdown menu i want to use as filters to filter out data in a table. I just created a plunk to demonstrate what i want to acchieve, here is the URL of my plunk

Filtering is working, but not giving the correct result based on what i select i dropdowns to filter on.

HTML
<!DOCTYPE html>
<html ng-app="drpFiltering">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <h1>{{name}}</h1>
     <select ng-model="filterItem.Org">
       <option value="">Filter on Org</option>
      <option value="org1">org1</option>
      <option value="org2">org2</option>
      <option value="org3">org3</option>
    </select>
     <select ng-model="filterItem.Period">
       <option value="">Filter on Period</option>
      <option value="2017">2017</option>
      <option value="2018">2018</option>
    </select>
    <select ng-model="filterItem.ActionPlan">
      <option value="">Filter on ActionPlan</option>
      <option value="Plan1">Plan1</option>
      <option value="Plan2">Plan2</option>
      <option value="Plan3">Plan3</option>
      <option value="Plan4">Plan4</option>
    </select><br><br>
    
    <table id="actionPlans" >
    <thead>
        <tr>
          <th></th>
          <th>Title</th>
          <th>Period</th>
          <th>AssociatedPlan</th>
          <th>Organization</th>
       </tr>
    </thead>
    <tbody>
        <tr ng-repeat="actionPlan in actionPlans | filter:customFilter">
         <td></td>
         <td>{{actionPlan.Title}}</td>
         <td>{{actionPlan.Period}}</td>
         <td>{{actionPlan.ActionPlan}}</td>
         <td>{{actionPlan.Org}}</td>
        </tr>
    </tbody>
    </table>                
  </body>
</html>

Open in new window


Javascript Controller
var app = angular.module('drpFiltering', []);

app.controller('MainCtrl', function($scope) {
  //$scope.name = 'Dropdown filtering';
  
   $scope.actionPlans = [
        {
            Org: 'org1',
            Title: 'Gjennomføre julebord',
            Period: '2017',
            ActionPlan: 'Kommunedelplan Helse',
           
        },
        {
            Org: 'org1',
            Title: 'Gjennomføre medarbeiderundersøkelse',
            Period: '2017',
            ActionPlan: 'Handlingsprogram 2017-2020',
           
        }
       ,
        {
            Org: 'org2',
            Title: 'God økonomistyring',
            Period: '2018',
            ActionPlan: 'Detaljprogram Helse',
          
        },
         {
            Org: 'org2',
            Title: 'Kjøre medarbeiderundersøkelse',
            Period: '2018',
            ActionPlan: 'Kommunedelplan Helse',
          
        }
         ,{
            Org: 'org2',
            Title: 'Gjennomføre medarbeiderundersøkelse	',
            Period: '2017',
            ActionPlan: 'Temaplan Helse',
          
        }
        , {
            Org: 'org3',
            Title: 'Korrupsjonsforebyggende opplæring',
            Period: '2017',
            ActionPlan: 'plan2',
           
        },
        {
           Org: 'org3',
            Title: 'opplæring',
            Period: '2018',
            ActionPlan: 'plan3',
           
        },
        {
            Org: 'org1',
            Title: 'opplæring',
            Period: '2018',
            ActionPlan: 'plan4',
           
        }
    ];
   
    
     $scope.customFilter = function (data) {
        if ($scope.filterItem !== undefined) {
            if ($scope.filterItem.Org === data.Org) {
              return true;
            } 
            if ($scope.filterItem.Period === data.Period) {
              return true;
            }
            if ($scope.filterItem.ActionPlan === data.ActionPlan) {
               return true;
            } 
            else{
              return false;
            }  
        }
     };
});

Open in new window



Thanks for helping....

reg
0
Comment
Question by:Adnan
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 4

Expert Comment

by:Elizabeth Anderson
ID: 41903745
Try this:

<tr ng-repeat="player in players | filter:{id: player_id, name:player_name} | filter:ageFilter">

$scope.ageFilter = function (player) {
    return (player.age > $scope.min_age && player.age < $scope.max_age);
}

Open in new window

0
 
LVL 57

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41903755
You don't need a custom filter - you can use an Angular one like this
<tr ng-repeat="actionPlan in actionPlans | filter:{Org: filterItem.Org, Period: filterItem.Period, ActionPlan: filterItem.ActionPlan}">

Open in new window

This basically says find all items in actionPlans that have properties with values matching those in the object we pass to filter.

This will do a fuzzy search on the data - so if you have ActionPlan drop down = 'Plan1' then any record with Plan1 in the ActionPlan property will match i.e.
'Plan1'
'This is Plan1'
'Plan1 is my favourite'

Open in new window

If you want an exact match you add true to the filter like so
<tr ng-repeat="actionPlan in actionPlans | filter:{Org: filterItem.Org, Period: filterItem.Period, ActionPlan: filterItem.ActionPlan}:true">

Open in new window

You can read more about Angular filters here

Working sample here
0
 

Author Closing Comment

by:Adnan
ID: 41903785
Solved my issue, filtering is working ass aspected ....
0

Featured Post

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Set css in function 11 55
Can't Find the Homepage on my site 4 46
Make icons act like add/minus for qtys 6 43
Javascript question 8 44
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question