更新分页在AngularJS过滤后(Update pagination in AngularJS a

2019-08-31 18:29发布

我已经有分页实现。 现在我想分页到我的过滤后的结果进行更新。

表格:

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

使用$timeout而不是window.setTimeOut$timeout正确裹在角工作始终。



Answer 2:

使用@abject_error的回答$timeout不工作。 我编辑你的摆弄他的建议,并提出本的jsfiddle

警告

我认为解决的办法是在比赛条件的形式表明一个更大的问题的!

使用的jsfiddle和filterFilter $腕表

而小提琴是围绕它的方式实数。

这里是解释

你的竞争条件是处理的变化之间search和可用性$scope.filtered

我认为,匪徒为了解决这个竞争条件是消除:

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

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

采用ng-change来断火“过滤器()”做的计算noOfPages还要取决于搜索的改变,以创建filtered 。 这样做,这样,确保过滤列表不可能在时间来计算的页数准备好了,这就是为什么由10ms的步履蹒跚的“过滤器()”与超时给你一个工作程序的错觉。

你需要的是一个方法来“看” search更改,然后过滤列表中的一个地方,你都可以访问两个创建$scope.filtered和计算$scope.noOfPages 。 所有序列中,没有一场比赛。

角有办法! 它可以使用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 3:

你可以简单地使用这个指令来代替:

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

它提供了分页与过滤器,同时保持代码非常干净。

荣誉对michaelbromley为伟大的代码。



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/



文章来源: Update pagination in AngularJS after filtering