Question

我有一种情况，我想展示一系列事件，一切顺利。现在我做了一个复选框过滤器，我是否可以选择是否要显示过去的事件。每页的最大事件数量为10，因此分页开始起作用并向我显示有2页可用（当前有12个事件）。

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

好消息是，我的过滤器正在运行;）

我的控制器：

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>

因此，当选择所有事件（未来和过去）时，一切正常。 14个事件= 2页。但是当我只想在未来看到活动时，它将在未来展示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>

过滤数据时，分页数不会改变

1 个答案: