Filtering on infinite scroll

[ri...@baobablogic.com]

I just asked this question on Stack Overflow (http://stackoverflow.com/questions/13119402/filtering-a-page-with-infinite-scroll-in-angularjs) but I am going to post it here as well because I am really stuck.

I implemented an infinite scrolling feature on my AngularJS + Node.js app.

It is based on this JSfiddle and works the same way: http://jsfiddle.net/vojtajina/U7Bz9/ 
(Actually this one is probably closer to mine:  http://jsfiddle.net/evaneus/r6n9v/1/)

HTML:

<div id="fixed" when-scrolled="loadMore()">
  <ul>
   <li ng-repeat="i in items">{{i.id}}</li>
  </ul>  
</div>​

Javascript:

function Main($scope) {
  $scope.items = [];

  var counter = 0;
   $scope.loadMore = function() {
     for (var i = 0; i < 5; i++) {
        $scope.items.push({id: counter});
        counter += 10;
     }
   };

  $scope.loadMore();
}

angular.module('scroll', []).directive('whenScrolled', function() {
  return function(scope, elm, attr) {
    var raw = elm[0];

    angular.element(window).bind('scroll', function() {
            var rectObject = raw.getBoundingClientRect();
            if (rectObject.bottom === window.innerHeight) {
                scope.$apply(attr.whenScrolled);
            }
     });
  };
});

​

My reasons for implementing the infinite scroll is in order to save my users bandwidth by not loading all 1000 results and their corresponding images unless the user wants to see all of it.

However when searching within the results using an AngularJS filter I am encountering problems, because of course not all the results are there (unless the user has scrolled to the very bottom) so the search will only return a fraction of the required results.

I then removed the infinite scrolling feature in order to have the search function work properly but this provided new issues on chrome (not on Firefox though) when I open the page the browser starts loading images from the top. If I then filter the results by searching for something starting with "z" (at the very bottom of the results) Firefox switches focus and loads the results starting with "z" first (as they are then the only ones being displayed). However chrome continues loading through the list and thus the user will only see the results of their search (for "z") once all the images in the app have been loaded.

I am looking for a way to have angular provide both the infinite scroll and a proper search filter on the results at the same time. If this is not possible then a way to make chrome load the visible images first.

I am currently trying some weird stuff with a bunch of different arrays in the scope but I haven't had any luck so far.

Here is another example of my situation in the AngularJS tutorial. If this page: had 1 million results, the images were high resolution, and the user searched for the ZZZOOM Phone 5000 then how would one make sure chrome loads the image of the ZZZOOM PHone 5000 before loading all the images of the other phones. (The way IE, Firefox and Safari already do automatically.)

[Peter Bacon Darwin]

Rather than pull in all 1000s of items and only "show" the relevant ones to the user.  How about you only ask the server for a window of the data and do the filtering on the server?

That way, you will only be sent the smallest amount of data that you need and the images that will be downloaded will be the ones for the items that the server provided.

You could do some funky caching of items that have been pulled down already.

Pete

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

[kirtesh jain]

Hi Were you able to solve this issue ie providing search filter to search in all records while using infinitescroll .

I am also stuck in similar situation .Please let me know your solution.

[Jagadesh Paladugula]

Hi Kritesh,

After looking at your mail, I would suggest to change the design. BTW, Angular js doesn't have the inbuilt component for infinite scroll and filter.

When the filter is  NOT applied you should fetch results from API 1 and when you scroll, you should fetch the next page records from the same API.

When the filter is Applied you should fetch results from API 2 and when you scroll, you should do the same thing. Fetch the next set of records and populate.

So, when you change the filter criteria, it would be a new request from scratch.

Hope this helps.

Regards,

Jagadesh

Regards,

Jagadesh

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.

To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.

Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--
Regards
Jagadesh