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 On Mon, Jun 23, 2014 at 10:50 PM, kirtesh jain <[email protected]> wrote: > 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. > -- 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 [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.
