user3629354 user3629354 - 11 days ago 6
AngularJS Question

How to Chain multiple custom filters with AngualrJS

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

<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>


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;
}
}
};
});


Any help with this will be realy apprissiated.

Answer

Here is a solution (HTML only), without declaring a custom function in your Angular controller:

<tr ng-repeat="actionPlan in actionPlans | filter: {ActionPlan: filterItem.ActionPlan, Period: filterItem.Period, Org: filterItem.Org}">

Forked your Plunker here.