角度 - 滤波时调整分页

我是Angular的新手，对我来说很容易。角度 - 滤波时调整分页

我的问题类似于this one。我正在做一些与众不同的事情，所以我接受的答案并不适合我。

我正在使用Angular UI Bootstrap的分页指令对数据集进行分页，并且我正在使用Angular过滤器来允许用户过滤任何列的数据。

问题是，当数据被过滤时，用户只能看到他当前所在页面上的数据。

$scope.applyFilter = function() { 
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage); 
    var end = begin + $scope.itemsPerPage; 
    $scope.totalItems = $filter('filter')($scope.items).length; 
    $scope.filteredItems = $filter('filter')($scope.items).slice(begin, end); 
};

Here's the full Plunker

例如，如果你在状态过滤器“GA”（这个词“状态”下的文本框）的状态键，返回任何数据。但是，您可以选择第4页并查看符合条件的一条记录。

我想要发生的是分页自动调整，只显示一页结果，并显示正确的记录给用户。

我知道还有其他的网格指令已经有了这个功能，但我宁愿不要完全放弃我目前的方法。

来源

2016-11-04 Ben Osborne

你忘了参数到您的过滤器调用

$scope.applyFilter = function() { 
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage); 
    var end = begin + $scope.itemsPerPage; 
    $scope.totalItems = $filter('filter')($scope.items, $scope.search).length; 
    $scope.filteredItems = ($filter('filter')($scope.items, $scope.search)).slice(begin, end); 
};

来源

2016-11-04 15:37:01 Varkal

这样做的伎俩。谢谢。 –

我建议你写一个自定义分页过滤

app.filter('paginate', function() { 
    return function(items, currentPage, itemsPerPage) { 
     if (!Array.isArray(items)) { 
      return items; 
     } 

     var sliceStart = (currentPage - 1) * itemsPerPage; 

     return items.slice(sliceStart, sliceStart + itemsPerPage); 
    }; 
});

移动过滤逻辑控制器

$scope.applyFilter = function() { 
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage); 
    var end = begin + $scope.itemsPerPage; 

    $scope.filteredItems = $filter('filter')($scope.items, $scope.search); 
    $scope.filteredItems = $filter('orderBy')($scope.filteredItems, $scope.propertyName, $scope.reverse); 
};

最后更新你的HTML在两个地方。这里

<tr ng-repeat="item in filteredItems | paginate : currentPage : itemsPerPage">

这里

<ul uib-pagination total-items="filteredItems.length" ng-model="currentPage" class="pagination-sm" boundary-links="true" force-ellipses="true" items-per-page="5" ></ul>

Your updated example

来源

2016-11-04 15:37:07

可以使用limitTo过滤器在你的NG-重复分页。

例如

<tr ng-repeat="item in items | filter:search:strict | orderBy:propertyName:reverse | limitTo:5:(currentPage-1)*5" >

棘手的部分是更新过滤器更改时显示在分页窗口小部件中的页面数。您可以通过在应用limitTo过滤器之前将过滤的项目分配给变量来完成此操作。例如

<tr ng-repeat="item in filteredItems = (items | filter:search:strict | orderBy:propertyName:reverse) | limitTo:5:(currentPage-1)*5" > 

<ul uib-pagination total-items="filteredItems.length" ...></ul>

使用这种方法，不需要任何东西或在控制器中进行任何过滤。

工作plunkr：http://plnkr.co/edit/8NinIYdRsXDVLCPz5VJN?p=preview

来源

2016-11-04 17:06:43 rob

谢谢，这绝对是一个更精简的控制器。我最终重蹈覆辙。 –

角度 - 滤波时调整分页

回答

相关问题