如何用http请求实现无限滚动？

Question

我正在编写一个webapp angularjs，我得到一个对象数组，相当长。我使用嵌套的ng-repeat来显示索引中的对象。我像Facebook一样使用无限滚动。当您位于页面底部时，它会为更多对象发出http get请求。

我试过使用这两个库，但我真的很困惑

1：http://lorenzofox3.github.io/lrInfiniteScroll/

2：http://binarymuse.github.io/ngInfiniteScroll/demo_async.html

这是我的嵌套ng-repeat

               <div ng-repeat="monthi in monthedIncidents"  ng-hide="showme">
<div style="width: 100%;">
    <h3>{{monthi.name}}</h3>
        <div class="line-separator"></div>
</div>
<ul class="list">
    <li class="list__item" ng-repeat="incident in monthi.incidents">
        <!-- ngrepeat: mostrar total de incidentes-->
        <a href="#" data-toggle="modal" data-target="#incidentModal" ng-click="selectIncident(incident.index)">
            <!-- /.badgetSection-->
            <figure class="list__item__inner">
                <div class="bagdets">
                    <span class="glyphicon glyphicon glyphicon-comment"><span> {{incident._embedded.commentsCount}} </span>
                    <span class="glyphicon glyphicon glyphicon-picture"><span> {{incident._embedded.attachmentsCount}} </span>
                </div>
                <!-- ./badges -->
                <div class="hoverMask"></div>
                <div class="incident-image">
                    <img ng-src="{{incident._links.thumbnail.href || 'img/03.jpg'}}">
                    <p class="incident-type"><span>{{incident._embedded.incident_type}}</span>
                    </p>
                </div>
                <figcaption>
                    <p>{{incident.name}}</p>
                    <p>{{incident.id}}</p>
                    <div class="line-separator"></div>
                    <p id="description">{{incident.description | strLimit: 90 }}</p>
                    <div class="line-separator"></div>
                    <p><span class="glyphicon glyphicon-calendar"></span> {{incident.upload_date | date:'EEE - dd/MM/yyyy '}} <span class="glyphicon glyphicon-time"></span> {{incident.upload_date | date:'hh:mm:ss a '}}</p>
                    <div class="line-separator"></div>
                    <p> <span class="glyphicon glyphicon-user"></span> {{incident._embedded.employee}}</p>
                </figcaption>
            </figure>
        </a>
    </li>
    <!-- /.list__item -->
</ul>
<!-- /.list -->

这是我的控制器：

app.controller("IncidentIndexCtrl", function ($resource, $scope, Incident, Device, IncidentType, $http, $window) {
/*Obtener todos los incidentes*/
$scope.reloadIncidents = function () {

    Incident.getIncidents({

        startdate: $scope.startDateResult,
        enddate: $scope.endDateResult,
        description: $scope.descriptionResult,
        incidentType: $scope.incidentTypeResult,

    }, function (data) {
        $scope.incidents = data._embedded.incidents;


        var monthIncidents = [];

        for (var i in $scope.incidents) {
            var month = new Date($scope.incidents[i].upload_date).getMonth();

            if (!monthIncidents[month]) {
                monthIncidents[month] = {
                    name: $scope.months[month],
                    incidents: []
                };
            }

            var incident = $scope.incidents[i];
            incident.index = i;

            monthIncidents[month].incidents.push(incident);
        }

        $scope.monthedIncidents = [];

        for (var e in monthIncidents) {
            $scope.monthedIncidents.push(monthIncidents[e]);
        }

    });


};

$scope.reloadIncidents();

$scope.months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

  

startdate：$ scope.startDateResult enddate：$ scope.endDateResult   描述：$ scope.descriptionResult incidentType：   $ scope.incidentTypeResult

这些值仅用于操作此URL： http://incidents-core/app_dev.php/incidents?order=ASC&orderBy=id&limit=4

JSON数组为我提供了下一个对象的URL，具体取决于限制

{
"offset": 0,
"limit": 4,
"_links": {
    "self": {
        "href": "http://incidents-core/app_dev.php/incidents?order=ASC&orderBy=id&limit=4&offset=0"
    },
    "first": {
        "href": "http://incidents-core/app_dev.php/incidents?order=ASC&orderBy=id&limit=4&offset=0"
    },
    "next": {
        "href": "http://incidents-core/app_dev.php/incidents?order=ASC&orderBy=id&limit=4&offset=4"
    }
}

Answer 1

试试这个：

查看：

$scope.chartlist = [];

var a = [[1, 2],[2,4]];

function chardata(){

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

        $scope.chartConfig = {
            options: {
                chart: {
                    type: 'bar'
                }
            },
            series: [{
                data: a[i]
            }],

        }
        $scope.chartlist.push($scope.chartConfig);
     }

}




chardata();

<强>控制器：

<div infinite-scroll="find()" infinite-scroll-disabled="busy || stopScroll" infinite-scroll-distance="1"><!-- Your content --></div>