Solved

How to Chain multiple custom filters with AngualrJS

Posted on 2016-11-28
3
78 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 56

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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 embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

740 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