angularjs ajax分页,angularJS插件：ngInfiniteScroll无限滚动加载数据(自动分页)

无限滚动(Infinite Scroll)也称为自动分页、滚动分页和无限分页。常用在图片、文章或其它列表形式的网页中，用来在滚动网页到页面底部的时候自动加载下一页的内容。

这种形式最早由twitter使用，后来必应图片搜索、谷歌图片搜索、google reader等纷纷采用了这一项技术，于是靠滚动浏览器滚动条来翻页的技术慢慢在互联网上遍站开花。该技术非常适合移动端的数据自动加载。

ngInfiniteScroll是用于AngularJS的无限滚动控件，特点是简单易用，是angularjs社区里应用最为广泛的”触底加载”控件。

栗子如下，先引入必备文件(注意加载顺序)

1、注入到module

var myApp = angular.module('myApp', ['infinite-scroll'])

2、定义factory

myApp.factory('scrollLoadData', ['$http','common','$rootScope',

function($http,common,$rootScope){

var myData = function(url){

this.items = [];

this.busy = false;

this.after = 1;

this.url = url;

};

myData.prototype.nextPage = function(){

if(this.busy){

return;

}

this.busy = true;

var myurl = $rootScope.serverUrl+this.url+"?pageNum="+this.after;

$http.get(myurl).success(function(res){

if(res.data.list.length > 0){

var items = res.data.list;

for(var i = 0; i < items.length; i++){

this.items.push(items[i]);

}

this.busy = false;

this.after += 1;

if(this.after > res.data.totalPage){

this.busy = true;

}

}else{

this.busy = true;

}

}.bind(this));

};

return myData;

}]);

3、controller中

myApp.controller("myController",['$scope','scrollLoadData',function($scope,scrollLoadData){

$scope.doMore = new scrollLoadData("aaa/list");

}])

4、template中

{{x.title}} {{x.time | limitTo:10}}

{{x.content}}

加载中...

5、错误写法

ng-repeat和infinite-scroll不能放在同一个标签下。