I'm download data from my server when user enter url into input and click Submit. Next I display this data in HTML:
<p>{{printResult.pg}}</p>
<ul>
<li ng-repeat="offer in printResult.offers">
<p>{{offer.name}}</p>
</li>
</ul>
printResult.pg
is a number of pages
I would like to add pagination from 1 to printResult.pg
and when user change page Angular call post to server to next data. How can I do this?
My controller:
angular.module('PostService', [])
.controller('PageCtrl', function ($scope, PostModel) {
var srv = this;
srv.offers = [];
function postUrlToService(url) {
$scope.dataLoading = true;
$scope.printResult = null;
initCreate();
PostModel.postUrl(url).then(function (result) {
srv.offers = result.data;
$scope.totalItems = srv.offers.pg;
$scope.printResult = srv.offers;
$scope.dataLoading = false;
});
}
function initCreate() {
srv.newUrl = {url: ''};
}
srv.postUrlToService = postUrlToService;
})
.constant('ENDPOINT', 'http://localhost:8080/api/send')
.service('PostModel', function ($http, ENDPOINT) {
var service = this;
function getUrl() {
return ENDPOINT;
}
service.postUrl = function (url) {
return $http.post(getUrl(), url);
};
});
EDIT:
I DO THIS, but when I click next page post call performed TWICE. Why?
<pagination
ng-model="currentPage"
total-items="printResult.pg"
max-size="printResult.pg"
boundary-links="true">
</pagination>
///
$scope.$watch("currentPage + numPerPage", function() {
if(urlFromForm.url) {
console.log("Klikam + " + $scope.currentPage);
console.log("Url: " + urlFromForm.url);
pageNumber = $scope.currentPage;
postUrlToService(urlFromForm);
}
});
function postUrlToService(url) {
$scope.dataLoading = true;
$scope.printResult = null;
initCreate();
PostModel.postUrl(url).then(function (result) {
srv.offers = result.data;
$scope.totalItems = srv.offers.pg;
$scope.printResult = srv.offers;
$scope.dataLoading = false;
});
}
function initCreate() {
srv.newUrl = {url: ''};
}
srv.postUrlToService = postUrlToService;
})
.constant('ENDPOINT', 'http://localhost:8080/api/send')
.service('PostModel', function ($http, ENDPOINT) {
var service = this;
function getUrl() {
return ENDPOINT;
}
service.postUrl = function (url) {
return $http.post(getUrl(), url);
};
});