Question

我试图在ng-repeat上实现Bootstrap分页。

HTML

<tr data-ng-repeat="userDetails in data.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) |filter:status:status.status" >   
      <td>{{userDetails.status.status}}</td>
      <td> {{ userDetails.subDate | date : 'MM-dd-yyyy' }} </td>
      <td> {{ userDetails.fullName }} </td>
      <td> {{ userDetails.serviceType.serviceName }} </td>
      <td> {{ userDetails.status.status }} </td>
 </tr>
<select ng-model="viewby" ng-change="setItemsPerPage(viewby)"><option>5</option><option>10</option></select> records at a time.

<uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" class="pagination-sm" items-per-page="itemsPerPage"></uib-pagination>

JS

$http.get('getAlldetails').success(function(response)
    {
        $scope.data = response;
        $scope.totalItems = $scope.data.length;
        $scope.viewby = 10;
        $scope.currentPage = 1;
        $scope.itemsPerPage = $scope.viewby;
        $scope.maxSize = 5; //Number of pager buttons to show

        $scope.setPage = function (pageNo) {
            $scope.currentPage = pageNo;
        };

        $scope.setItemsPerPage = function(num) {
            $scope.itemsPerPage = num;
            $scope.currentPage = 1; 
            }               
    })

问题是如果我每页设置10个项目，它会显示随机数量的项目，如第一页中的7个项目，下一页中的9个项目，然后继续。我尝试添加ui-bootstrap-tpls.js但没有运气。

Answer 1

您会看到这些结果，因为在过滤之前正在应用分页。因此，对于页面大小10，选择10个项目，然后过滤器运行留下7或9个项目，或者其中许多项目满足过滤器。

可以通过重新排列这样的ng-repeat代码来解决这个问题，以确保首先应用过滤器：

<tr data-ng-repeat="userDetails in (data | filter:status:status.status).slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) " >

使用ng-repeat工作不正常的AngularJs Bootstrap分页

1 个答案: