Angularjs 像分页一样的 facebook 无限滚动

Question

我想使用 angularjs 在我的应用程序中应用类似 facebook 的分页。我如何在 angularjs 上找到滚动结束事件。目前我正在尝试使用以下代码，但它不起作用。

HTML代码

  <div ng-app='myApp' ng-controller='StudController'>
               <div infinite-scroll='loadMore()' infinite-scroll-distance='2'>
                    <div ng-repeat="stud in student.lststudent">
                        {{stud.rollno}}
                    </div>
                </div>
        </div>

JS脚本代码

<script>

    var myApp = angular.module('myApp', ['infinite-scroll']);
    myApp.controller('StudController', function ($scope, $http) {
          $scope.loadMore = function () {

            var data = $.param({
                type: "new",
             });

            $http({
                method: 'POST',
                data: data,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                url: 'http://www.apiservice.com/api/StudentList/GetStudent'
            })
            .success(function (data) {
                alert(JSON.stringify(data));
                $scope.student= data;


            });

        };
    });

</script>

API Json 响应格式

{
    "lststudent": [{
        "rollno": 12,
        "name": "sam"
    }, {
        "rollno": 15,
        "name": "peter"
    }],
    "status": true,
    "message": "success"
}

Answer 1

最后我找到了如下解决方案。

我已经按照下面的解决方案完成了 URL。

http://sroze.github.io/ngInfiniteScroll/demo_async.html

Javascript代码

var mainApp = angular.module("mainApp", ['infinite-scroll']);

myApp.controller('studentcontroller', function ($scope, Reddit, $http) {

    $scope.reddit = new Reddit();

myApp.factory('Reddit', function ($http) {

    var Reddit = function () {
        this.items = [];
        this.busy = false;
        this.pageno = 1;

    };

    Reddit.prototype.nextPage = function () {
        if (this.busy) return;
        this.busy = true;
        var data = $.param({
            rollno: $("#hdnrollno").data('value'),
            pageno: this.pageno,
            pagesize: 10
        });

        NProgress.start();
        $http({
            method: 'POST',
            data: data,
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            url: 'http://www.apiservice.com/api/StudentList/GetStudent'
        })
        .success(function (data) {
            scope = data;
            var items = data.lststudent;
            if (items.length <= 0)
            {
                NProgress.done();
                return;
            }

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

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

            this.pageno = this.pageno + 1;
            this.busy = false;
            NProgress.done();
        }.bind(this));


    };

    return Reddit;
});

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/ngInfiniteScroll/1.2.1/ng-infinite-scroll.min.js"></script>

  <div ng-app='myApp' ng-controller='StudController'>
                  <div infinite-scroll='reddit.nextPage()' infinite-scroll-disabled='reddit.busy' infinite-scroll-distance='1'>
                    <div ng-repeat="stud in reddit.items">
            <span> Rollno </span>    {{stud.rollno}}
            <span> Student Name</span>   {{stud.name}}
              </div>
          </div>

        </div>

Angularjs 像分页一样的 facebook 无限滚动

Angularjs infinite-scroll for facebook like pagination

angularjs

pagination

infinite-scroll