带有自定义 ng-repeat 指令的自定义过滤器和 LimitTo 选项

Question

我有以下代码，其中我有一个 nested ng-repeat 并且还在内部 ng-repeat 中使用 filter 和 limitTo 选项

http://jsfiddle.net/WqSGR/27/

在这里，我的套装中的物品非常少。但在我的真实案例中，我在外循环和内循环中都有大约 1000 个项目。但是我在使用 ng-repeats 来处理巨大的集合时遇到了问题 - Angular JS ng-repeat consumes more browser memory

所以我有自己的 ng-repeat，它大大减少了内存使用量：

http://jsfiddle.net/WqSGR/28/

但是我可以在我的自定义 ng-repeat 指令中使用类似于上述 ng-repeat 的 filter 和 limitTo 选项吗？

注意： 内部 ng-repeat 并不总是限制为 5。我有内部 ng-repeat 的内部滚动，并且当内部滚动到达结束时有一个 watch，上限增加 5。

非常感谢任何帮助！

我尝试过的最接近的是： http://jsfiddle.net/WqSGR/29/

但是有人可以帮助解决如何在searchText 上应用手表以使过滤器正常工作吗？

Answer 1

是的，您可以在链接函数中使用过滤器：

myApp.directive('myRepeater', function(filterFilter, limitToFilter) {
  return {
    restrict: 'A',        
    link: function(scope, element, attrs) {
      var myTemplate = "<div>{{rating}}</div>";
      var filteredItems = filterFilter(scope.items, scope.SearchText);
      var limitedItems = limitToFilter(filteredItems, 5);
      angular.forEach(limitedItems, function(item){                
        var text = myTemplate.replace("{{rating}}",item.rating);
        element.append(text);
      });
    }
  };
});

然后，您将继续从那里创建 $watchers 以观察 scope.SearchText 和 scope.NumberOfItems 上的更改以相应地更新列表。