2017-06-05 53 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变量和从而改变显示的内容。