Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How to Chain multiple custom filters with AngualrJS

Posted on 2016-11-28
3
Medium Priority
?
297 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 58

Accepted Solution

by:
Julian Hansen earned 2000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

This article discusses how to implement server side field validation and display customized error messages to the client.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

719 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