2013-02-25 49 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 2013-02-26 15:22:29

+1

感谢您的回答!在“pageChanged”示例中,$ scope.watchPage = newPage的用途是什么? – standingwave 2014-03-14 07:48:33

+1

我要疯了,因为在来到这里之前我已经尝试了这两种方法,但都没有工作:( – Dustin 2014-08-14 16:58:29

5

@ pkozlowski.opensource答案是正确的,除了最近版本的引导已经改变在选择页ng-change