Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 405
  • Last Modified:

How to Chain multiple custom filters with AngualrJS

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
Adnan
Asked:
Adnan
1 Solution
 
Elizabeth AndersonDigital Marketing ExecutiveCommented:
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
 
Julian HansenCommented:
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
 
AdnanAuthor Commented:
Solved my issue, filtering is working ass aspected ....
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now