0
如何使用AngularJS鏈接多個過濾器。我的情況是我有3個下拉菜單我想用作過濾器來過濾表中的數據。我只是創建了一個plunk來展示我想實現的目標，這裏是我的網址plunk如何將多個自定義過濾器與AngualrJS鏈接
過濾工作正常，但沒有根據我選擇的下拉列表進行正確的結果篩選。
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控制器：
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;
}
}
};
});
任何幫助，這將真的apprissiated。