I can’t seem to get this code to work, although I think I know the problem. It seems by increasing my limitTo amount it doesn’t increase the size of my scroll box and thus won’t allow me to view my content. Any suggestions or ideas on how to fix it? Here is my code below.
angular.module(‘va_disability.ecfr’, [])
.controller('EcfrCtrl', ['$scope', '$state', '$http', 'ecfrService', function EcfrCtrl($scope, $state, $http, ecfrService) {
$scope.items = [];
$scope.ecfr = {};
if($scope.items.length <= 0 ) {
$scope.items = ecfrService.documentList;
console.log(ecfrService.documentList);
}
$scope.ecfr.totalToDisplay = 10;
$scope.loadMore = function () {
$scope.ecfr.totalToDisplay += 10;
console.log($scope.items);
console.log($scope.items.length);
console.log($scope.ecfr.totalToDisplay);
$scope.$broadcast('scroll.infiniteScrollComplete');
};
$scope.$on('$ionicView.afterEnter', function(){
$scope.vanav.hidesubheader = 'add-height';
});
$scope.$on('$ionicView.beforeLeave', function(){
$scope.vanav.hidesubheader = 'hide-sub-header';
});
}]);
<div id="ecfr-content" class="list card" style="margin-top:10px;">
<div ng-repeat="item in items | filter:vanav.filters | limitTo:ecfr.totalToDisplay"
class="item item-text-wrap">
<h1>{{item.largeHead}}</h1>
<h2>{{item.head}}</h2>
<div ng-bind-html="item.blurb"></div>
<br />
<h2>{{item.tablesHead}}</h2>
<div ng-bind-html="item.tables"></div>
</div>
<ion-infinite-scroll distance="2%"
on-infinite="loadMore()"
></ion-infinite-scroll>
</div>
</ion-content>