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.