Question

如何使用AngularJS链接多个过滤器。我的情况是我有3个下拉菜单，我想用作过滤器来过滤掉表中的数据。我刚刚创建了一个插件来演示我想要的内容，这是我的plunk

的网址

过滤正在运行，但根据我选择的下拉列表进行过滤，没有给出正确的结果。

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

任何对此的帮助都将得到真正的了解。

Answer 1

这是一个解决方案（仅限HTML），没有在Angular控制器中声明自定义函数：

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

Forked your Plunker here.

Answer 2

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:{Org:filterItem.Org,Period:filterItem.Period,ActionPlan:filterItem.ActionPlan}">
     <td></td>
     <td>{{actionPlan.Title}}</td>
     <td>{{actionPlan.Period}}</td>
     <td>{{actionPlan.ActionPlan}}</td>
     <td>{{actionPlan.Org}}</td>
    </tr>
</tbody>
</table>

Angularjs

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

    }
]});

如何使用AngualrJS链接多个自定义过滤器

2 个答案: