angularjs 中实现 load more 功能

在UI 我们经常需要render 一些集合， 如果集合数据过多，那我们可能会采取分页的解决方案，本文是另外一种解决方法，就是当集合数量大于一定数量的时候显示一个 加载更多按钮，点击后，自动加载指定数量的数据。

1. 首先我们创建一个angularjs 页面，让他显示 10条记录：

 

Html page

<div ng-app="APP">

    <h2>angularjs page</h2>

    <div ng-controller="userController">

          <div ng-repeat="user in users">

            {{user.fname}} {{user.lname}}  {{user.zip}} 

        </div>

    </div>

    <hr />

</div>

 

Js file, 在这里我使用了filltext 这个api 来返回模拟数据

var APP = angular.module('APP', []).

controller('userController', function ($scope,$http) {

       $http.jsonp("http://www.filltext.com/?callback=JSON_CALLBACK&rows=10&fname={firstName}&lname={lastName}&zip={zip}").

    success(function (data) {

        $scope.users = data

    })

});

点击地址看预览效果： http://jsfiddle.net/vyhwb3t2/5/

2. 在html page 添加

 <div><button ng-click="loadMore()">load more</button></div>

 

3. 在controller 添加

$scope.loadMore = function(){

　　$http.jsonp("http://www.filltext.com/?callback=JSON_CALLBACK&rows=10&fname={firstName}&lname={lastName}&zip={zip}").

　　success(function (data) {

　　　　$scope.users = $scope.users.concat(data);

　　}
);

ok, 大功告成，是不是非常简单。当然了，在实际情况中，我们还需要根据记录的情形，做些调整，比如显示剩余的记录条数，等数据都加载出来后，就隐藏掉load more 按钮等。

最后 完整代码： http://jsfiddle.net/vyhwb3t2/6/

预览图：