34

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

表格：

<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/

4

4 回答 4

36

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

警告

我认为解决方案以竞争条件的形式表明了一个更大的问题！

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()”延迟 10 毫秒会给您一种工作程序的错觉。

您需要的是一种“观察”更改的方法，然后在您可以访问创建和计算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>
于 2013-12-20T07:12:35.760 回答
4

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

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

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

感谢 michaelbromley 的出色代码。

于 2014-09-10T12:04:51.567 回答
3

使用$timeout而不是window.setTimeOut. $timeout正确包装以在 Angular 中始终如一地工作。

于 2013-04-22T13:00:45.557 回答
2

使用角度$scope.$watch

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

资源 ; http://jsfiddle.net/eqCWL/2/

演示；http://jsfiddle.net/eqCWL/192/

于 2015-02-16T18:45:57.740 回答