My current project involves developing a webapp using AngularJS to interact with a long array of objects. To display these objects on my index, I am utilizing nested ng-repeat functions. Additionally, I have implemented infinite scroll functionality similar to Facebook, where making it activates an HTTP GET request for more objects.
However, in trying to incorporate this feature, I find myself confused between two libraries:
1:
2:
Here is the code snippet for my nested 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)">
<figure class="list__item__inner">
<div class="bagdets">
<span class="glyphicon glyphicon-comment"><span> {{incident._embedded.commentsCount}} </span>
<span class="glyphicon glyphicon-picture"><span> {{incident._embedded.attachmentsCount}} </span>
</div>
<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>
<p id="description">{{incident.description | strLimit: 90 }}</p>
<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>
<p> <span class="glyphicon glyphicon-user"></span> {{incident._embedded.employee}}</p>
</figcaption>
</figure>
</a>
</li>
</ul>
</div>
This section demonstrates my controller's role:
app.controller("IncidentIndexCtrl", function ($resource, $scope, Incident, Device, IncidentType, $http, $window) {
/*Retrieve all incidents*/
$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 description: $scope.descriptionResult incidentType: $scope.incidentTypeResult
The purpose behind using these values is to manipulate the following URL:
The JSON array provides me with the URL for accessing the next object based on the specified limit:
{
"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"
}
}
}