Question

我正在尝试在angularjs中显示带分页的列表，但只显示第一页而其他页面为空。你能帮助我吗？

这是我的代码：

Controller.js：

angular.module('Client').controller('ListaInventarioCtrl',  function($scope, $location, $filter, InventarioResource){

    $scope.Inventarios = InventarioResource.query();  
    $scope.pageSize = 5;  
    $scope.currentPage = 0;

    $scope.getData = function () {
      return $filter('filter')($scope.Inventarios, $scope.search)
    }

    $scope.numberOfPages=function(){
        return Math.ceil($scope.getData().length/$scope.pageSize);                
    }
});

angular.module('Client')
.filter('startFrom', function() {  
    return function(input, start) {    
        start = +start;   
        return input.slice(start);    
    }   
});

listInventario.html：

<div class="input-field">
        <input placeholder="Search" type="text" ng-model="search">
</div>

<tr ng-repeat="Inventario in Inventarios | filter:search | limitTo:pageSize | startFrom:currentPage*pageSize">
        <td>{{ Inventario.id }}</td>
</tr>

<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
    Previous
  </button>
  {{currentPage+1}}/{{numberOfPages()}}
  <button ng-disabled="currentPage >= getData().length/pageSize - 1" ng- click="currentPage=currentPage+1">
    Next
 </button>

当我单击“下一步”按钮时，ng-repeat中的列表为空

Answer 1

我找到了解决方案，你必须首先在ng-repeat中使用“startFrom”和“limitTo”之后。

这将是解决方案：

<tr ng-repeat="Inventario in Inventarios | filter:search | startFrom:currentPage*pageSize | limitTo:pageSize">
        <td>{{ Inventario.id }}</td>
</tr>

Answer 2

我将补充答案：limitTo:pageSize track by $index"

<tr>      
    <td data-ng-repeat="Inventario in filteredData =
        (Inventarios| filter:search)
        | startFrom: currentPage * pageSize
        | limitTo:pageSize track by $index">

        <span>{{Inventario.id}}</span>
     </td>
 </tr>

或者在这个答案中，我发现你是第一个选项，这是一个很好的例子

堆栈溢出： enter link description here

Plunker： enter link description here

走运:)

分页ng-repeat仅显示第一页中的数据

2 个答案: