Question

我有一些使用ng-repeat生成的项目，我必须添加分页。但是我可以通过获取项目的计数值看到的任何地方，我可以添加。但我无法使用跳过。即如果跳过值为10，它将跳过第一项并列出其他项，我需要使用angular-ui bootstrap来使用跳过值。
以下服务中的代码

mainEvents: function() {
        var self = this;
        var skipNumber=2;
        return $http.get(UrlService.baseUrl + '/event/upcoming?count='+ skipNumber).then(function(response) {
            // var events = response.data;
            var events = response.data.events;
            var upEvents=[];

            var eventsLen = events.length;
            for (var i = 0; i < eventsLen; i++) {
                self.prepareForRendering(events[i]);
            }
            var totalItems = response.data.events.length;

            angular.copy(response.data.events, upEvents)
             console.log(upEvents);
            // angular.copy(response.data.tracks, $scope.tracks)
            return events;

        }, function(response) {
            return $q.reject(response.data.error)
        });
    },
$scope.pageChanged = function() {
    mainEvents();
  };

标记

<ul>
  <li ng-repeat="event in events">{{event.name}}</li>
</ul>

<pagination total-items="totalItems" ng-model="skipNumber" ng-change="pageChanged()" items-per-page="1"></pagination>

根据点击的页码，skipNumber增加10,20等..，怎么做。任何人都请帮帮我

Answer 1

工作fiddle。

events变量是一个数组，因此您可以使用slice方法： ng-repeat="event in events.slice( (currentPage - 1) * itemsPerPage, currentPage * itemsPerPage )"。

您已将itemsPerPage设置为1：items-per-page="1"且currentPage为($scope.skipNumber / $scope.itemsPerPage) + 1（此处的删除结果必须为整数）。

生成的html看起来像：

<ul>
  <li ng-repeat="event in events.slice( (currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)">{{event.name}}</li>
</ul>

<pagination total-items="totalItems" ng-model="currentPage" items-per-page="itemsPerPage"></pagination>

如何使用skip参数使用angular-ui bootstrap进行服务器端分页？

1 个答案: