过滤后更新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

<强> CAVEAT

我认为解决方案表明竞争条件存在更严重的问题！

jsFiddle using filterFilter and $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。请在Filters Guide - Using filters in controllers and services

中查看

将其注入控制器。

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); }) 函数中使用它

ng-change

更改模板以反映我们的新方式。 DOM过滤器或<input type="text" ng-model="search" placeholder="Search"/>

中没有更多内容

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

和

{{1}}

Answer 2

您只需使用此指令：

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

它提供了一个过滤器分页，同时保持代码的美观和干净。

向michaelbromley致敬，感谢伟大的代码。

Answer 3

使用$timeout代替window.setTimeOut。 $timeout被正确包装，以便在Angular中一致地工作。

Answer 4

使用有角度的$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/