如何使用使用skip参数的angular-ui引导程序进行服务器端分页？

Question

我有许多使用ng-repeat生成的项目，我必须添加分页。但是通过获取项目计数值可以看到的任何地方，我都可以添加。 但我无法使用跳过。 也就是说，如果跳过值是10，它将跳过第一项并列出其他项，我需要像使用angular-ui引导程序使用跳过值一样。
服务内部的以下代码

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>

基于单击的页码，跳过编号要增加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>