多个 select 菜单未使用 angular 中的分页进行过滤

Question

我有几个 select 菜单，我正在尝试让我的自定义过滤器与我在网站上用于分页的 dirPagination 指令一起使用。似乎我遗漏了一些东西，它没有让过滤后的数组重置并仅填充我需要的基于 select 离子的过滤数据。我确实在重复时遇到了重复错误，但是通过 $index 添加轨道没有任何好处。有人可以告诉我我缺少什么才能使正确的过滤工作吗？

这是我的 plunker.

HTML:

<div class="form-group">
    <div class="col-sm-3 corpEvents-filters">
        <label for="sel1">Deadline Date</label>
        <br />
        <select class="form-control" id="sel1" ng-model="search.DeadlineDate" ng-options="filter.SelectItemValue as filter.SelectItemName for filter in sortFilters | filter:{FilterType:'Deadline Date'}">
            <option value="">Select One</option>
        </select>
    </div>

    <div class="col-sm-3 corpEvents-filters">
        <label for="sel2">Holdings</label>
        <br />
        <select class="form-control" ng-model="search.Holdings" ng-options="filter.SelectItemValue as filter.SelectItemName for filter in sortFilters | filter:{FilterType:'Holdings'}">
            <option value="">Select One</option>
        </select>
    </div>
    <div class="col-sm-3 corpEvents-filters">
        <label for="sel3">Type</label>
        <br />
        <select class="form-control" ng-model="search.eventType" ng-options="filter.SelectItemValue as filter.SelectItemName for filter in sortFilters | filter:{FilterType:'Type'} | orderBy: 'SelectItemName'">
            <option value="">Select One</option>
        </select>
    </div>
    <div class="col-sm-3 corpEvents-filters">
        <label for="sel4">Status</label>
        <br />
        <select class="form-control" id="sel4" ng-model="search.Status" ng-options="filter.SelectItemValue as filter.SelectItemName for filter in sortFilters | filter:{FilterType:'Status'}">
            <option value="">Select One</option>
        </select>
     </div>
 </div>

        <table class="table table-condensed">
          <thead>
            <tr>
              <th>Deadline Date</th>
              <th>Holding</th>
              <th>Type</th>
              <th>Status</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody dir-paginate="event in filteredEvents = (events | corpEventFilter:search) | itemsPerPage: 10" pagination-id="evt">
            <tr>
              <td width="15%">{{ event.DeadlineDate | date: 'MM/dd/yyyy' }}</td>
              <td width="35%">{{ event.Holding }}</td>
              <td width="20%">{{ event.Type | limitTo:20 }}{{event.Type.length > 20 ? '...' : ''}}</td>
              <td width="20%">{{ event.Status }}</td>
              <td>
                <a ui-sref="#">{{ event.Action }}</a>
              </td>
            </tr>

          </tbody>
          <tbody ng-if="filteredEvents.length === 0"><tr><td>No events found.</td></tr></tbody>
        </table>

      <div class="text-center">
        <dir-pagination-controls pagination-id="evt" boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="dirPagination.tpl.html"></dir-pagination-controls>
      </div>

JS:

 app.filter('corpEventFilter', function($filter) {
return function (items, search) {
if (!search) {
    return items;
}


var filtered = [];
var count = 0;

for (var i = 0; i < items.length; i++) {
  var item = items[i];

  if (search.DeadlineDate !== null) {
    // Return today's date and time
    var currentDate = new Date()
    var currentMonth = $filter('date')(currentDate, 'MM');
    var currentYear = $filter('date')(currentDate, 'yyyy');
    var currentMonthYear = currentMonth + currentYear;
    // Deadline Date
    var ddDate = new Date(item.DeadlineDate);
    var ddMonth = $filter('date')(ddDate, 'MM');
    var ddYear = $filter('date')(ddDate,'yyyy');
    var ddMonthYear = ddMonth + ddYear;

    //Selected Option
    if (search.DeadlineDate === 'This Year')
    {
      if (ddYear == currentYear)
      {
        filtered.push(item);
      } 
    }
    if (search.DeadlineDate === 'This Month')
    {
      if (ddMonthYear === currentMonthYear)
      {
        filtered.push(item);
      } 
    }
    if (search.DeadlineDate === 'This Week') 
    {
     var eventWeek = ddDate.getWeek();
     var eventWeekRange = eventWeek[0].toLocaleDateString() + ' to ' + eventWeek[1].toLocaleDateString();

     var currentWeek = new Date().getWeek();
     var currentWeekRange = currentWeek[0].toLocaleDateString() + ' to '+ currentWeek[1].toLocaleDateString();

     if (eventWeekRange === currentWeekRange) {
       filtered.push(item);
     }
    }
  }

  if (search.Holdings !== null) {
    if (item.HoldingType === search.Holdings) {
      filtered.push(item);
    }
  } 
  if (search.eventType !== null) {
    if (item.Type === search.eventType) {
      filtered.push(item);
    } 
  }
  if (search.Status !== null) {
    if (item.Status === search.Status) {
      filtered.push(item);
    }
  }
}

// If you choose 'Select One' it should undo the filter
if (search.DeadlineDate === null || search.Holdings === null || search.Status === null) {
    return items;
}

return filtered;
};

Answer 1

在您的过滤函数中，每次满足条件时您都将相同的项目添加到 filtered 数组。如果项目满足 n 条件，它将被添加到结果中 n 次。这就是您收到欺骗错误的原因。

for (item in items) {
  if (item meets condition1) {
    add item to results;
  }
  if (item meets condition2) {
    add item to results;
  }
  if (item meets condition3) {
    add item to results;
  }
  etc...
}

如果其中一个条件不满足，您需要做的是移至下一项。

for (item in items) {
  if (item doesn't meet condition1) {
    move to next item;
  }
  etc...
  add item to results; // this will only be reached if the item meets all conditions
}

使用您的代码：

var filtered = [];

for (var i = 0; i < items.length; i++) {
  var item = items[i];

  if (search.DeadlineDate) {
    // this was lengthy so I left it out but I've updated it in the plunker
  }

  if (search.Holdings && search.Holdings !== item.HoldingType) {
    continue;
  } 

  if (search.eventType && item.Type !== search.eventType) {
    continue;
  }

  if (search.Status && item.Status !== search.Status) {
    continue;
  }

  filtered.push(item); // any item that reaches here meets all conditions
}

return filtered;

您检查了搜索属性是否为 null，但从未指定如果 undefined 时要做什么。使用以下模式检查属性是否存在，然后比较它。

if (search.Holdings && search.Holdings !== item.HoldingType) {
   continue;
}

Updated Plunker

多个 select 菜单未使用 angular 中的分页进行过滤

Multiple select menu not filtering with pagination in angular

pagination

filtering

angularjs