Question

所以我创建了一个date range filter，现在正在使用它。

但我的问题是，当我过滤它时，displayedCollection.length为什么不会改变？

例如，只有一个结果，因此displayedCollection.length值将 1

HTML

 <i class="fa fa-filter" aria-hidden="true"></i> Results : {{displayedCollection.length}}</h2>

 <tr ng-repeat="attendance in displayedCollection | dateRange:from:to ">
    <td>{{ attendance.day | date: 'EEEE, MMM d'}}</td>
    <td>{{ attendance.timeIn | date:'h:mm a' }}</td>
    <td>{{ attendance.timeOut | date:'h:mm a'}}</td>
    <td class="text-capitalize">
        <i class="fa fa-map-marker" aria-hidden="true"></i> {{ attendance.details }}</td>
    <td>{{ attendance.totalHrs | date:'hh:mm'}} </td>
</tr>

控制器

.filter('dateRange', function ($filter) {
  return function (items, fromDate, toDate) {
    var filtered = [];
    if (!fromDate && !toDate) {
      return items;
    }

    var from = Date.parse(fromDate) - 1;
    var to = Date.parse(toDate) + 1;

    items.day = new Date();

    angular.forEach(items, function (item) {
      var itemDayParsed = Date.parse(item.day);

      if (itemDayParsed > from && itemDayParsed < to) {
        filtered.push(item); 
      }
    });
    return filtered;
  };
})

感谢。

Answer 1

这是因为displayedCollection保持不变，您应该引入过滤结果：temp，它的长度值将完全符合您的预期：

<i class="fa fa-filter" aria-hidden="true"></i> Results : {{temp.length}}</h2>

<tr ng-repeat="attendance in (displayedCollection | dateRange:from:to) as temp">
    <td>{{ attendance.day | date: 'EEEE, MMM d'}}</td>
    <td>{{ attendance.timeIn | date:'h:mm a' }}</td>
    <td>{{ attendance.timeOut | date:'h:mm a'}}</td>
    <td class="text-capitalize">
        <i class="fa fa-map-marker" aria-hidden="true"></i> {{ attendance.details }}</td>
    <td>{{ attendance.totalHrs | date:'hh:mm'}} </td>
</tr>

日期范围过滤器不会更改collection.length

1 个答案: