Question

我有一些选择菜单，我试图让我的自定义过滤器使用dirPagination指令，我在我的网站上使用分页。好像我错过了一些没有让过滤后的数组重置的东西，只根据选择填充了我需要的过滤数据。我确实在重复时得到了dupes错误，但是通过$ 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

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

1 个答案: