2013-02-25 2 views
13

Я пытаюсь реализовать разбивку на страницы на угловом/загрузочном сайте. У меня есть данные, показывающие правильные # строк на странице, у меня есть угловой пейджинг, показывающий правильное количество страниц ... но, если я могу найти где-нибудь, что говорит мне, КАК использовать пейджинг, чтобы обновить мои данные, когда страница # нажата ...?! {{currentPage}} обновляет, но не уверен, как вызвать вызов getPresentations для обновления списка.Угловая разбивка на страницы - обновление данных onclick

<div> 
     {{noOfPages}} &nbsp; {{currentPage}} &nbsp; {{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> 

ответ

36

У вас есть 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

+4

Спасибо! Я знал, что это будет не так много ... раздражает меня, что они не включают эту часть в документ. – NikZ

+1

Спасибо за ответ! В примере с «pageChanged», какова цель $ scope.watchPage = newPage? – standingwave

+1

Я схожу с ума, потому что я пробовал оба этих метода, прежде чем приходить сюда, и ни один из них не работает :( – Dustin

5

@ pkozlowski.opensource ответ правильный , за исключением недавних версий бутстрапа, были изменены on-select-страница до ng-change.

Смежные вопросы