0

I have the following code where I have a nested ng-repeat and also uses filter and limitTo options in the inner ng-repeat

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

Here I have very less items in my set. But in my real case, I have about 1000 items in both outer and inner loop. But I face problem with using ng-repeats for huge set - Angular JS ng-repeat consumes more browser memory

So I had my own ng-repeat which reduced memory usage by considerable amount:

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

But Can I use the filter and limitTo options similar to the ng-repeat above here in my custom ng-repeat directive?

Note: The Inner ng-repeat will not always have limit as 5. I have inner scroll for the inner ng-repeat and have a watch on that which when inner scroll reaches end, increases limit by 5.

Any help is much appreciated!

The closest I tried is: http://jsfiddle.net/WqSGR/29/

But can someone help with how to apply watch on the searchText so that the filter works?

Community
  • 1
  • 1
Chubby Boy
  • 30,942
  • 19
  • 47
  • 47

1 Answers1

1

Yes, you can use filters inside your linking function:

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

Then, you would continue from there by creating $watchers to observe the changes on scope.SearchText and scope.NumberOfItems to update the list accordingly.

Stewie
  • 60,366
  • 20
  • 146
  • 113
  • Thanks very much @Stewie! Can you help me with filterFilter and limitToFilter as well or can you provide some directions? – Chubby Boy Jul 08 '13 at 16:51
  • I tried the following: http://jsfiddle.net/WqSGR/29/ But can you help me with how to apply watch on the searchText so that results update? – Chubby Boy Jul 08 '13 at 17:35
  • Awesome! Thanks for all your help! Here is my final fiddle with limitTo options: http://jsfiddle.net/SsnPb/1/ When the inner scroll reaches end, i increase the limit of corresponding user scope by 4 and I want that to be applied and the result set to increase.. Can you help me with the same.. Thanks again for all your help.. – Chubby Boy Jul 08 '13 at 18:36