ng-repeat中的Angularjs分页

Posted 2023-03-10

【中文标题】ng-repeat中的Angularjs分页

【英文标题】：Angularjs pagination in ng-repeat

【发布时间】：2014-06-21 05:02:32

【问题描述】：

在我的控制器中，我有以下从数据库获取数据的代码。

 $scope.noOfPages = 0;
    $scope.currentPage = 1;
    $scope.maxSize = 5;
 $scope.tickets = TicRepository.getTics.query( id: $routeParams.t_id , function (data) 
        $scope.tickets = data.items;
        $scope.noOfPages = data.totalPages,
        $scope.currentPage = data.pages;
    );

在我的html中我有

 <div>
    div>
        noOfPages &nbsp; currentPage &nbsp; maxSize
        <pagination num-pages="noOfPages" current-page="currentPage"></pagination>
    </div>
     <div ng-repeat="tics in tickets " >
          ................
     </div>
  </div>

我的数据很好，但分页不起作用。在分页按钮中，它只显示 1 页并列出所有项目。请让我知道如何解决此问题。 谢谢

【问题讨论】：

你能发布一个小提琴或 plunker 吗？没有看到你的指令也很难说。

【参考方案1】：

您似乎正在使用ui.bootstrap.pagination。 pagination 指令跟踪当前页面，但您仍然需要过滤您的数组。一种解决方案是ng-repeat 覆盖数组的一个子集：

<pagination ng-model="currentPage" total-items="tickets.length" items-per-page="5"></pagination>
<div class="alert alert-info" ng-repeat="tic in paged.tickets">
  tic
</div>

然后在当前页面更改时更新该子集：

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

  $scope.paged = 
    tickets: $scope.tickets.slice(begin, end)
  
);

这是一个工作演示：http://plnkr.co/edit/oFuE6vjI6t0AHhSVt6Gt?p=preview

其他一些（更复杂的）选项包含在这个相关问题中：Pagination on a list using ng-repeat

【参考方案2】：

我就是这样实现的，希望对你有参考帮助。

JS：

 $scope.RegionPage = 1;
        $scope.RegionRow = 10;
        $scope.RegionRows = [5, 10, 20];

        $scope.GetAttributesByRegion = function (regionFrwdPageButtonClick, regionBckPageButtonClick) 
            if (regionFrwdPageButtonClick) 
                if (($scope.RegionPage + 1) <= $scope.RegionTotalPages) 
                    $scope.RegionPage = $scope.RegionPage + 1;
                
            
            if (regionBckPageButtonClick) 
                if ($scope.RegionPage <= 0) 
                    $scope.RegionPage = 1;
                 if ($scope.RegionPage > 1) 
                    $scope.RegionPage = $scope.RegionPage - 1;
                
            
            //get all regions
            $http( method: 'GET', url: '/Admin/GetAttributesByRegion', params:  page: $scope.RegionPage, rows: $scope.RegionRow  ).success(function (data, status) 
                $scope.Regions = data;

                $scope.RegionTotalRecords = 0;
                if (data != null && data != '' && JSON.stringify(data) != '[]') 

                    $scope.RegionTotalPages = parseInt(Math.ceil(data[0].TotalRecords / $scope.RegionRow));
                    $scope.RegionPages = new Array();
                    for (i = 1; i <= $scope.RegionTotalPages; i++) 
                        $scope.RegionPages[i] = i;
                    
                 else 
                    $scope.RegionTotalPages = 0;
                    $scope.RegionPages = null;
                


            );
        ;

HTML：

<div style="overflow-x: scroll; padding-right: 1px;">
    <table class="table table-condensed" style="font-size: 85%; min-width: 650px;">
        <thead>
            <tr>
                <th>Region</th>
                <th>State</th>
                <th>Neighborhoods</th>
                <th>Locations</th>
                <th>Revenue</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="region in Regions">
                <td>region.RegionName</td>
                <td>region.State</td>
                <td>region.NeigborhoodCount</td>
                <td>region.LocationCount</td>
                <td>region.Revenue</td>
                <td>
                    <span class="pull-right">
                        <a href="#regionDetailsModal" data-toggle="modal">Details</a> / 
                        <!-- TODO Aamir Malcolm -- Please integrate link below -->
                        <a href="#addNeighborhoodModal" data-toggle="modal">Add a Neighborhood</a>
                    </span>
                </td>
            </tr>


        </tbody>
    </table>
</div>


<div class="row-fluid">
    <a href="#addRegionModal" class="btn btn-pinkes span3" style="margin-top: 15px;" data-toggle="modal"><i class="icon-plus icon-white"></i>&nbsp;&nbsp;&nbsp;Add new</a>

    <div class="span9 drmc" style="font-size: 85%;">
        <button ng-click="GetAttributesByRegion(false,true)" class="btn btn-mini" id="btnBackwardTop" type="button"><i class="icon-arrow-left"></i></button>
        &nbsp;&nbsp;
        Page&nbsp;
        <select style="width: auto; margin-top: 10px;" ng-change="GetAttributesByRegion(false,false)" ng-model="RegionPage">
            <option ng-repeat="regionPage in RegionPages">regionPage</option>
        </select>
        &nbsp;of&nbsp; RegionTotalPages&nbsp;&nbsp;
        <button ng-click="GetAttributesByRegion(true,false)" class="btn btn-mini" id="btnForwardTop" type="button"><i class="icon-arrow-right"></i></button>
        <select style="width: auto; margin-left: 5px; margin-top: 10px;" ng-change="GetAttributesByRegion(false,false)" ng-model="RegionRow">
            <option ng-repeat="regionRow in RegionRows">regionRow</option>
        </select>
    </div>
</div>