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

Question

i have a number of items generated using ng-repeat, i have to add pagination.but everywhere i can see by getting the count value of items, i can add. but i am not able to get using skip. ie if the skip value is 10, it will skip the first items and list the other items,i need to do like using the skip value using angular-ui bootstrap.
following code inside services

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();
  };

markup

<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>

Based on page number clicked,skipNumber to be incremented by 10, 20 etc.., How to do it.can anyone please help me

Answer 1

Working fiddle .

The events variable is an array, so you can use slice method with it: ng-repeat="event in events.slice( (currentPage - 1) * itemsPerPage, currentPage * itemsPerPage )" .

You have set itemsPerPage as 1 here: items-per-page="1" and currentPage is ($scope.skipNumber / $scope.itemsPerPage) + 1 (the devision result here must be an integer).

The resulting html would look like:

<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>