$rootScope:infdig 分页过滤数据时出错答案

【问题标题】：$rootScope:infdig error when paginating filtered data$rootScope:infdig 分页过滤数据时出错
【发布时间】：2014-07-03 22:37:32
【问题描述】：

我正在使用ng-paginator-plz 对我的应用程序中的一些数据进行分页。我还想在显示之前通过一些过滤器传递这些数据，所以我正在这样做：

<paginator class="paginator" data="filteredUsers = (users | filter:search)" page-size="20" export-paged-data-to="paginatedUsers"></paginator>

然后通过paginatedUsers来显示我ng-repeat的数据。如果我删除过滤器，这会起作用，但过滤器到位后，我会收到 [$rootScope:infdig] 错误。

搜索此错误导致我得到这样的答案：$rootScope:infdig error caused by filter? - 这表明问题是因为过滤器被多次评估。我该如何解决这个问题？

编辑：我已将以下内容添加到我的控制器 JS 文件中：

$scope.filter = function(){
    $scope.filteredUsers = $filter('search')($scope.users);
};

$scope.$watch('search', function() {
    $scope.filter();
});

我还在传递依赖关系的顶部添加了$filter。但是当页面首次加载和使用过滤器时，这会给我一个$injector:unpr 错误。如果我将过滤器行更改为$scope.filteredUsers = $scope.users;，则会出现错误（但显然它没有进行任何过滤），所以我猜我的代码有问题。

【问题讨论】：

标签： angularjs pagination

【解决方案1】：

当您认为有必要重新过滤数据时，您可以在控制器中手动过滤它，并将过滤后的数据存储在单独的 $scope 变量中。

用 loDash 表示简短。

$scope.filter = function(){
    $scope.filteredUsers = _.filter(users, function(user){return user.name.indexOf($scope.search) !== -1;});
    // or any kind of angular filters..
}
$scope.$watch('search',  _.debounce($scope.filter, 100));

<paginator data="filteredUsers" ....></paginator>

【讨论】：

谢谢，我认为您已经为我指明了正确的方向，但我还没有完成这项工作。我在我的问题中添加了一些代码。我不确定我应该使用_.filter() 还是_.debounce()，所以这可能是我出错的地方。
您是否更改了模板？ data="filteredUsers = (users | filter:search)" 到 data="filteredUsers"?
无论如何，如果你提供了一个小提琴会更清楚。 Here is 一个空白。
抱歉，我也更改了模板。这是一个小提琴：jsfiddle.net/HB7LU/4756。希望我能够将其提炼成一个简单的示例。如果您在搜索框中输入内容，您将看到第一个用户列表已使用您的搜索进行过滤。在此之下，您将看到我如何尝试对相同的过滤列表进行分页。我在这个小提琴上遇到的错误略有不同 - Unknown provider: searchFilterProvider <- searchFilter - 我想我错误地引用了过滤器。
是的。 Angular 会一点一点地改变过滤器语法。对于小提琴中使用的1.2.1 version，它是function(filterFilter) {filterFilter(this.array, 'a');}。此外，当您在模板中过滤时，它是| filter:search:'fieldName'。（这里是）[jsfiddle.net/HB7LU/4759/]你更新的小提琴。