我已经有分页实现。 现在我想分页到我的过滤后的结果进行更新。
表格:
<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/
使用$timeout
而不是window.setTimeOut
。 $timeout
正确裹在角工作始终。
使用@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>
你可以简单地使用这个指令来代替:
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
它提供了分页与过滤器,同时保持代码非常干净。
荣誉对michaelbromley为伟大的代码。
使用角$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/