AngularJS: The ability to automate page scrolling to automatically load data

To implement this, you can do this by https://github.com/sroze/ngInfiniteScroll the third-party control. The steps are as follows:

1. Download Ng-infinite-scroll.js program http://sroze.github.io/ngInfiniteScroll/current version is 1.0.0

2. If you are using jQuery2.0 above, you will also need to modify the Ng-infinite-scroll.js program to change all the $window.xxx to $ (window). XXX, elem.xxx change to $ (elem). xxx

3. Introduction of script in HTML

<Scripttype= ' Text/javascript 'src= ' Path/to/jquery.min.js '></Script><Scripttype= ' Text/javascript 'src= ' Path/to/angular.min.js '></Script><Scripttype= ' Text/javascript 'src= ' Path/to/ng-infinite-scroll.min.js '></Script>

4. The HTML sample code is as follows:

1 <DivNg-controller= ' Postlistcontroller '>2     <DivInfinite-scroll= ' demo.nextpage () 'infinite-scroll-disabled= ' Demo.busy 'infinite-scroll-distance= ' 1 '>3         <Divng-repeat= ' ItemIn Demo.items '>4             <P>5                 <inputtype= "hidden"value= "{Item.} PostID}} " />6                 <label>{Item.} Writername}}</label>7                 <label>{Item.} Writermail}}</label>8                 <label>{Item.} Wreckername}}</label>9                 <label>{Item.} StartDate}}</label>Ten                 <label>{Item.} Location}}</label> One                 <label>{Item.} Story}}</label> A             </P> -         </Div> -         <DivNg-show= ' Demo.busy '>Loading data ...</Div> the     </Div> - </Div>

5. The Postlistcontroller.js code is as follows:

1 varFtitappmodule = Angular.module (' Ftitapp ', [' Infinite-scroll ']);2 3Ftitappmodule.controller (' Postlistcontroller ', 4     function($scope, Demo) {5$scope. Demo =NewDemo ();6 });7 8 //Create a background data interaction factory9Ftitappmodule.factory (' Demo ',function($http) {Ten     varDemo =function () { One          This. Items = []; A          This. Busy =false; -          This. after = "; -          This. Page = 0; the     }; -      -Demo.prototype.nextPage =function () { -         if( This. Busy)return; +          This. Busy =true; -          +         varurl = "Http://192.168.3.95:7002/api/post/nextpage?id=" + This. Page + "&callback=json_callback"; A$http. Jsonp (URL). Success (function(data) { at             varItems =data; -              for(vari = 0; i < items.length; i++) { -                  This. Items.push (Items[i]); -             } -              This. after = "t3_" + This. items[ This. items.length-1].id; -              This. Busy =false; in              This. page + = 1; -}.bind ( This)); to     }; +  -     returnDemo; the});

This implements the ability to automatically load data from the server after the page is dragged to the end.