「ngInfiniteScroll」を使います。
http://binarymuse.github.io/ngInfiniteScroll/のDownloadから落としてきますが、「ng-infinite-scroll.min.js」を使うとなぜかエラーになったので、Developmentの圧縮ファイルの方を落としてきます。
解凍して「ng-infinite-scroll.js」を使います。
hoge.html
<html lang="ja" ng-app="hogeApp">
〜
<body>
<div clas="container" ng-controller="hogeController as app">
<div infinite-scroll="loadMore()" infinite-scroll-distance="0">
<div ng-repeat="item in items">
{{item.title}}
</div><!--item-->
</div><!--col-->
</div><!--conteainer-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="app.js"></script>
<script src="lib/ng-infinite-scroll.js"></script>
</body>
</html>
無限スクロールの対象に「infinite-scroll」アトリビュートを指定して、パラメータに追加要素を読み込むメソッドを指定します。
「ng」は付けないので注意。
ここではitemsという変数に配列を格納しているので、このitemsに要素を追加するメソッドが「loadMore」だよ、と指定しています。
app.js
var app = angular.module("hogeApp", ['infinite-scroll']);
app.factory('loadArticle', function($http) {
return {
loadArticle : function(limit) {
return $http.get('http://something.api.com/get_data?limit='
+ limit).success(function(data, status, headers, config) {
return data;
});
}
}
});
app.controller('hogeController', ['$scope', 'loadArticle', function($scope, loadArticle) {
$scope.loadMore = function() {
loadArticle.loadArticle(12, $scope.next).then(function(res) {
for(var i=0; i<res.data.length; i++) {
$scope.items.push(res.data[i]);
$scope.next++;
}
});
};
loadArticle.loadArticle(12, 0).then(function(res) {
$scope.items = res.data;
$scope.next = $scope.items.length;
})
}]);
ここでは例としてAPIでJSONとってきてリストに追加する、という形にしています。
ページをスクロールしていくとloadMoreが呼ばれてitemsに要素が追加されて、無限スクロールが実現できます。