带有Custom ng repeat指令的Custom Filter和LimitTo选项

Custom Filter and LimitTo options with Custom ng-repeat directive

本文关键字：Custom LimitTo 选项 Filter 指令 ng repeat 带有      更新时间：2023-09-26

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

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

在这里，我的套装里的东西很少。但在我的真实案例中，我有大约1000个外循环和内循环项目。但我面临着使用ng重复进行大量设置的问题——Angular JS ng重复会消耗更多的浏览器内存

所以我有了自己的ng重复，这大大减少了内存使用：

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

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

注意：内部ng重复不会总是限制为5。我有一个用于内ng重复的内卷轴，上面有一个watch，当内卷轴到达终点时，将限制增加5。

非常感谢您的帮助！

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

但是，有人能帮助如何在searchText上应用手表以使过滤器工作吗？

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

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

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

相关文章：