i have a number of items generated using ng-repeat, i have to implement pagination.but everywhere i can see by getting the count value of items, i can add. but i am struggling with implementing skip functionality. For example, if the skip value is set to 10, it should skip the first 10 items and list the rest, I need to achieve this using angular-ui bootstrap.
The code snippet below is 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, the skipNumber should be incremented by 10, 20, etc., How can I accomplish this? Any help would be greatly appreciated.