如何使用skip参数使用angular ui引导进行服务器端分页

Question

我有很多使用ng repeat生成的项，我必须添加pagination。但通过获取项的计数值，我可以在任何地方添加。但是我不能使用skip。即，如果跳过值为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

工作小提琴。

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>