0

我目前正在编写一个 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'];

开始日期：$scope.startDateResult 结束日期：$scope.endDateResult 描述：$scope.descriptionResult 事件类型：$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"
    }
}
4

1 回答 1

0

尝试这个：

看法：

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

控制器：

    var count = 5;
    var page = 1;
    $scope.busy = false;
    $scope.stopScroll = false;


    $scope.find = function() {
        if ($scope.busy) return;
        $scope.busy = true;

        //HERE the Restfull action. With pagination. Pass a callback
        //...

        function callback(res){
            $scope.total = res.length;
            if(count*page>=$scope.total) $scope.stopScroll = true;
            page++;
            $scope.busy = false;
        }   

        });
    };
于 2015-05-10T23:53:35.363 回答