Angular/Bootstrapサイトにページネーションを実装しようとしています。ページごとの行の正しい数でデータが表示されています。angularページングで正しいページ数が表示されています...しかし、方法を教えてくれる場所が見つかった場合はどうでしょうか。ページ番号がクリックされたときにページングを使用してデータを更新します...?!{{currentPage}}が更新されていますが、getPresentationsを呼び出してリストを更新する方法がわかりません。
<div>
{{noOfPages}} {{currentPage}} {{maxSize}}
<pagination num-pages="noOfPages" current-page="currentPage"></pagination>
</div>
<script type="text/javascript">
angular.module('app', ['ui', 'shared', 'ui.bootstrap']).controller('AppCtl', function ($scope, $http, $window) {
var mvc = $window.MVC;
$scope.noOfPages = 0;
$scope.currentPage = 1;
$scope.maxSize = 5;
$scope.getPresentations = function () {
$http.get(mvc.base + "API/Presentations?page=" + $scope.currentPage + "&itemsPerPage=10")
.success(function (result) {
$scope.presentations = result.Items;
$scope.noOfPages = result.TotalPages;
$scope.currentPage = result.Page;
})
.error(function (result, status) {
$scope.newModal.errors = mvc.getApiErrors(status, result);
});
};
$scope.getPresentations();
});
</script>
2つのオプションがあります。
$watch
現在のページのプロパティonSelectPage
コールバックを使用するこれが$watch
の関連ページです
$scope.$watch('currentPage', function(newPage){
$scope.watchPage = newPage;
//or any other code here
});
そしてここでコールバックを使用しています:
$scope.pageChanged = function(page) {
$scope.callbackPage = page;
$scope.watchPage = newPage;
};
次のように使用されます:
<pagination on-select-page="pageChanged(page)" num-pages="noOfPages" current-page="currentPage"></pagination>
そして最後に、2つのアプローチを示す作業プランク: http://plnkr.co/edit/UgOQo7?p=preview
@ pkozlowski.opensourceの答えは正しいですが、最近のバージョンのbootstrapがon-select-pageからng-changeに変更されています。