Paolo B Paolo B - 1 month ago 16
AngularJS Question

Angular UI Bootstrap pagination - show first 12 records in ng-repat on inital page load

See this plunker for a working example of my issue.

Pagination is working when I click on a pagination page number but does not initially load the data for the first page (first set of records). The moment you click on a number it works fine.

Please note: the above plunker is just a demo for SO, my real project is more complex so I cant just get rid of the dataService etc.

var app = angular.module('plunker', ['ui.bootstrap.tpls', 'ui.bootstrap.pagination']);

app.controller('MainCtrl', function($scope, dataService) {
$scope.data = [];

dataService.getAll()
.then(function (response) {
// Success
$scope.data = response.data;
$scope.totalItems = $scope.data.length;
}, function (data, status, header, config) {
// Failure
});

$scope.itemsPerPage = 12;
$scope.currentPage = 1;

$scope.pageCount = function () {
return Math.ceil($scope.data/ $scope.itemsPerPage);
};

$scope.$watch('currentPage + itemsPerPage', function () {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
end = begin + $scope.itemsPerPage;

$scope.filtered = $scope.data.slice(begin, end);
});

});


//DataService

(function() {

"use strict";

angular.module("plunker").factory("dataService", dataService);

function dataService($http) {

return {
getAll: getAll
}

function getAll() {

return $http.get("http://api.scb.se/OV0104/v1/doris/en/ssd");
}
}

})();

Answer

Updated plunker : http://plnkr.co/edit/2yHEukhKZcFplmJaFv0P

Added a function updateView()

and this function is called once the data is loaded at first and in your watch

Comments