Solved

How to Chain multiple custom filters with AngualrJS

Posted on 2016-11-28
3
14 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
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 51

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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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 the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

743 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now