javascript - 过滤数据时分页数字不会改变

Question

我有一个情况，我想显示一个事件列表，哪些进展顺利。现在我做了一个复选框过滤器，是否可以选择是否要显示过去的事件。每页的最大事件数为 10，因此分页开始工作并显示有 2 个可用页面(当前有 12 个事件)。

当我取消选中复选框以查看过去的事件时，我只剩下 4 个过去的事件。问题是我的分页仍然让我看到有 2 个可用页面，但是当我单击第 2 页时，有一个空列表(它不向我显示事件。)

好消息是，我的过滤器正在工作;)

我的 Controller :

angular.module('app')
.controller("UserProfileController", ["userService", "eventService", "$routeParams", "$scope", "currentuserCache", "userOverviewStateService",
    function(userService, eventService, $routeParams, $scope, currentuserCache, userOverviewStateService) { 
$scope.behavior = {
        currentPage: 1,
    };
$scope.maxSizePagination = 3;
$scope.itemsPerPage = 10; 


self.hideOldDates = function() {
        if (self.showOldEvents) {
            return function() {
                return true;
            };
        } else {
            return function(event) {
                var yesterday = moment(new Date()).subtract(1, 'days');
                var evtDate = moment(event['date'], 'DD-MM-YYYY');
                return evtDate > yesterday;
            };
        }
    };

function createEventArray(){
        var events = self.user._events;
        self.eventArray = [];

        for (var i in events) {
            var dates = self.eventDates(events[i], self.user);
            for (var j in dates) {
                var event = {};
                event._id = events[i]._id;
                event.title = events[i].title;
                event.date = dates[j];
                event.dateForSorting = moment(event.date, 'DD-MM-YYYY').format("YYYY-MM-DD");
                event.start = moment(events[i].start).format('HH:mm');
                event.end = moment(events[i].end).format('HH:mm');
                event.eventStatus = events[i].eventStatus;
                self.eventArray.push(event);
            }
        };
       };

HTML

<tbody>
        <tr ng-repeat="event in profileCtrl.eventArray | orderBy: ['dateForSorting', 'start']  | filter: profileCtrl.hideOldDates() | start: (behavior.currentPage - 1) * itemsPerPage | limitTo: itemsPerPage">
            <td> <a href="/#/eventProfile/{{event._id}}/{{event.date}}">{{event.title}}</a> </td>
            <td> {{ event.date }} </td>
            <td> {{ event.start }} </td>
            <td> {{ event.end }} </td>
            <td> {{ event.eventStatus | translate }} </td>
            <td>
                <button class="btn btn-default" ng-click="profileCtrl.unsubscribe(event)">{{ 'unSubscribe' | translate }}</button>
            </td>
        </tr>
<uib-pagination ng-if="profileCtrl.eventArray.length" total-items="profileCtrl.eventArray.length" items-per-page="itemsPerPage" ng-model="behavior.currentPage" class="pagination-sm" max-size="maxSizePagination" direction-links="true" boundary-links="true" boundary-link-numbers="true" first-text="&laquo;" last-text="&raquo;" previous-text="&lsaquo;" next-text="&rsaquo;" style="margin:0"></uib-pagination>

<input type="checkbox" ng-model="profileCtrl.showOldEvents"> {{'includeOldDates' | translate}} </input>
    </tbody>

因此，当选择所有事件( future 和过去)时，一切正常。 14 个事件 = 2 页。但是当我只想查看 future 的事件时，它将显示 future 的4个事件，2页。 (当然必须是1)。

希望有人能给我一些开眼界的建议!

提前致谢!

Answer 1

我不确定这是否有效，因为我没有任何插件。

但是我们遇到了类似的问题，然后使用过滤器来显示长度。就像，

{{ (profileCtrl.eventArray | filter: profileCtrl.hideOldDates()).length }}

所以在你的

<uib-pagination ng-if="profileCtrl.eventArray.length" total-items="(profileCtrl.eventArray | filter: profileCtrl.hideOldDates()).length" items-per-page="itemsPerPage" ng-model="behavior.currentPage" class="pagination-sm" max-size="maxSizePagination" direction-links="true" boundary-links="true" boundary-link-numbers="true" first-text="&laquo;" last-text="&raquo;" previous-text="&lsaquo;" next-text="&rsaquo;" style="margin:0"></uib-pagination>