过滤后更新AngularJS中的分页

Question

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

表格:

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

Answer 1

@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火关"过滤器()"做的计算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>

Answer 2

使用$timeout而不是window.setTimeOut. $timeout已正确包装以在 Angular 中一致工作。