多选菜单不以角度分页过滤

Question

我有几个选择菜单，我正在尝试让我的自定义过滤器与我在我的网站上用于分页的 dirPagination 指令一起使用。好像我错过了一些没有让过滤后的数组重置并仅根据选择填充我需要的过滤器数据的东西。我确实在重复时遇到了欺骗错误，但通过 $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