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

Controller :

$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 的答案确实有效。我根据他的建议编辑了你的 fiddle 并制作了这个 jsFiddle

警告

我认为该解决方案表明存在竞争条件形式的更大问题!

jsFiddle using filterFilter and $watch

而那个 fiddle 就是解决它的真正方法。

这是解释

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

我认为为了解决这个竞争条件而需要消除的罪魁祸首是:

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

和

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

使用 ng-change 触发“filter()”来计算 noOfPages 但也取决于搜索的变化以创建 过滤。这样做可以确保过滤后的列表不可能及时准备好计算页数，这就是为什么将“filter()”延迟 10 毫秒并设置超时会给您一种正在运行的程序的错觉。

您需要一种方法来“观察”搜索 更改，然后在您有权访问两者的位置过滤列表创建 $scope.filtered并计算 $scope.noOfPages。一切按顺序进行，没有竞争。

Angular 有这种方式!可以在您的 Controller 中使用 filter 过滤器作为名称非常糟糕的函数:filterFilter。在 Filters Guide - Using filters in controllers and services 中查看

将其注入(inject) Controller 。

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

在 $watch 函数中使用它，记录在 scopes docs 中

$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);  
})

更改模板以反射(reflect)我们的新方式。不再在 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>