2017-06-05 97 views
0

我有分頁的問題: 這是我的HTML問題angularjs

<div class="panel panel-info" ng-repeat="item in filteredTodos | orderBy: 'Date' : true | filter : search"> 
    {{item.Name}} 
    </div> 
<div data-pagination="" data-num-pages="numPages()" 
     data-current-page="currentPage" data-max-size="maxSize" 
     data-boundary-links="true"></div> 

,這是我的控制器:

$scope.filteredTodos = [] 
    $scope.currentPage = 1 
    $scope.numPerPage = 4 
    $scope.maxSize = 5 

    $scope.makeTodos = function() { 
    $scope.Offre = []; 
    $http({ 
       header: 'content-type:application/json', 
       method: 'GET', 
       url: '/GetOffre', 
      }).success(function (messages) { 
      $scope.Offre =messages ; 
     }); 

    }; 
    $scope.makeTodos(); 

    $scope.numPages = function() { 
    return Math.ceil($scope.Offre.length/$scope.numPerPage); 
    }; 

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

    $scope.filteredTodos = $scope.Offre.slice(begin, end); 
    }); 

所以問題是,當我想表明我結果 result

我試圖改變currentPage = 0所以在我看來我可以點擊1,我可以看到結果只有當我clic鉀對1 ......當我刷新了同樣的問題重複

+0

currentPage必須從1開始我想。如果您想測試它,請添加更多數據或縮小頁面大小,使其大小超過1頁 – Icycool

回答

0

使用limitto頁面中,你NG-重複它比$看

<div class="panel panel-info" ng-repeat="item in filteredTodos | orderBy: 'Date' : true | filter : search"|limitTo:(($scope.currentPage - 1) * $scope.numPerPage):$scope.numPerPage*$scope.currentPage> 
{{item.Name}} 
</div> 
0

您可以通過使用模板做到這一點很容易內置的limitTo過濾器。

<div class="panel panel-info" ng-repeat="item in Offre | limitTo : maxSize : (currentPage * maxSize - maxSize)"> 
    <!-- print your item details here --> 
</div> 

然後可以添加按鈕(上一頁,下一頁,ATD。),這將改變currentPage變量和從而改變顯示的內容。