过滤后更新AngularJS中的分页

Update pagination in AngularJS after filtering

本文关键字：分页 AngularJS 更新 过滤      更新时间：2023-09-26

我已经实现了分页。现在，我希望在过滤结果后更新分页。

形式：

<input type="text" data-ng-model="search.name" data-ng-change="filter()"/>

列表：

<li data-ng-repeat="data in filtered = (list | filter:search) | filter:search | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">{{data.name}}</li>

分页：

<pagination data-boundary-links="true" data-num-pages="noOfPages" data-current-page="currentPage" max-size="maxSize"></pagination>

控制器：

$scope.filter = function() {
    window.setTimeout(function() { //wait for 'filtered' to be changed
        $scope.noOfPages = Math.ceil($scope.filtered.length/$scope.entryLimit);
        $scope.setPage = function(pageNo) {
            $scope.currentPage = pageNo;
        };
    }, 10);
};

我的问题是，在点击页码或在输入字段中输入下一个字符后，分页刚刚更新。所以它更新得晚了一步。

编辑：我将源代码添加到jsFiddle中：http://jsfiddle.net/eqCWL/2/

@abject_error使用$timeout的回答确实有效。我用他的建议编辑了你的小提琴，并制作了这个jsFiddle

CAVEAT

我认为这个解决方案以种族状况的形式表明了一个更大的问题！

jsFiddle使用filterFilter和$watch

而这把小提琴正是现实生活中的一种方式。

这是解释

您的竞赛条件介于处理search的更改和$scope.filtered的可用性之间。

我认为为了解决这种种族状况，需要消除的罪魁祸首是：

ng-model="search" ng-change="filter()"

和

ng-repeat="data in filtered = (list | filter:search)......."

使用ng-change触发"filter(("来计算noOfPages，但也取决于搜索的变化来创建filtered。这样做可以确保过滤后的列表不可能及时准备好计算页数，这就是为什么在超时的情况下将"filter(("延迟10ms会给你一种工作程序的错觉。

您需要的是一种方法来"观察"search的更改，然后在您可以创建$scope.filtered和计算$scope.noOfPages的地方过滤列表。按顺序排列，不分种族。

Angular就是这样！可以将控制器中的filter过滤器用作名称非常糟糕的函数：filterFilter。请参阅过滤器指南-在控制器和服务中使用过滤器

将其注入控制器。

function pageCtrl($scope, filterFilter) {
    // ...
}

在$watch函数中使用它，记录在范围文档中

$scope.$watch('search', function(term) {  
    // Create filtered 
    $scope.filtered = filterFilter($scope.list, term);  
    // Then calculate noOfPages
    $scope.noOfPages = Math.ceil($scope.filtered.length/$scope.entryLimit);  
})

更改模板以反映我们的新方式。不再使用DOM过滤器或ng-change

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

和

<li ng-repeat="data in filtered | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
    {{data.name}}
</li>

您可以简单地使用以下指令：

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

它提供了带有过滤器的分页，同时保持代码的整洁。

为伟大的代码向michaelbromley致敬。

使用$timeout而不是window.setTimeOut。CCD_ 16被适当地包装以在Angular中一致地工作。

使用角度$scope.$watch

$scope.$watch('search', function(term) {
    $scope.filter = function() {
        $scope.noOfPages = Math.ceil($scope.filtered.length/$scope.entryLimit);
    }
});

来源；http://jsfiddle.net/eqCWL/2/

Demo；http://jsfiddle.net/eqCWL/192/

相关文章：