Encountering an issue with the orderBy function in an ng-repeat paired with an auto-incrementing limitTo. After loading a few elements on the page, the directive ceases to function properly and stops increasing the element limit.
Here is the HTML code snippet:
<div class="row" id="main">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2 block animate"
ng-if="!errorDialogActive"
ng-repeat="build in builds.builds.build | limitTo:totalDisplayed | orderBy:'lastBuildDetails.startDate' : true track by build._id"
ng-class="{'running': project.running ,'block-green': build._status ==='SUCCESS','block-red': build._status==='FAILURE'}"
id="{{build._id}}"
progressive-loading>
<div class="title-container animate" ><p>{{build._buildTypeId}}</p></div>
<div class="update-container animate col-xs-12">
<time class="time">{{build.buildDate | date : 'dd.MM.yyyy H:mm:s'}} </time>
</div>
</div>
</div>
Here is the directive code:
return function (scope) {
if (scope.$last) {
$timeout(function () {
console.log('Im the last Displayed, Loading more');
scope.loadMore();
}, 100);
}
};
And this is the loadMore function:
$scope.loadMore = function () {
if ($scope.totalDisplayed >= $scope.size) {
console.log('no more builds : ' + $scope.totalDisplayed);
$scope.loaded=true;
} else {
$scope.totalDisplayed += 2;
console.log('More : ' + $scope.totalDisplayed);
$scope.totalDisplayedPercentage = (($scope.totalDisplayed*100)/$scope.size);
console.log('Percentage : ' + $scope.totalDisplayedPercentage);
}
};
Apologies for any language barriers. If further clarification or details are needed, please feel free to reach out.