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. On Monday, 29 October 2012 05:20:19 UTC-5, [email protected] wrote: > > 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 <http://angular.github.com/angular-phonecat/step-11/app/#/phones>: > 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.) > -- 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 [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
