A simple mistake in ngInfiniteScroll

Question

I have used ngInfiniteScroll but i have a small problem, i have a set of data in a variable items for eg) 20 but i want to show 5 on first view and the remaining on sliding. but my code loads all the 20 at the first view how can i achieve this, i have given my code below and my data structure

{
"data": [ {
                "name": "Hoarding Majestic",
                "code": 456,
                "image": "assets/images/images/hoarding1.jpg",
                "location": "Majestic"


            },
            {
                "name": "BusShelter ForumMall",
                "code": 452,
                "image": "assets/images/images/hoarding2.jpg",
                "location": "Whitefield"


            },
            {
                "name": "Digital Vijayanagar",
                "code": 458,
                "image": "assets/images/images/hoarding3.jpg",
                "location": "Vijayanagar"


            },
            {
                "name": "Digital Vijayanagar",
                "code": 458,
                "image": "assets/images/images/hoarding3.jpg",
                "location": "Vijayanagar"



            }
         ]
}

html:-

<div layout="row" layout-align="space-around" layout-padding infinite-scroll='loadMore()' infinite-scroll-distance='2' 
                    infinite-scroll-disabled='{{busyLoadingData}}'  infinite-scroll-container = "'#content'">
<table class="simple">
<thead>
  <tr>
     <th class="secondary-text">
        <div class="table-header">
           <span class="column-title">Asset</span>
        </div>
     </th>
     <th class="secondary-text">
        <div class="table-header">
           <span class="column-title">Location</span>
        </div>
     </th>

  </tr>
  </thead>
  <tbody>
  <tr ng-repeat="assets in items">
     <!--| priceRange:slider:lower:upper-->

     <td>{{assets.name}}</td>

     <td>{{ assets.location }}</td>

  </tr>

 </tbody>
 </table>
 </div>

and my controller:-

$scope.data = booking.data;
$scope.busyLoadingData = false;
$scope.items = [];
$scope.loadMore = function() { 
//console.log("asdfasdfasd");
if($scope.busyLoadingData)
   return;
   $scope.busyLoadingData = true;
     var last = $scope.data[$scope.data.length - 1];
    for(var i = 0 ; i <= 5; i++) {
      $scope.items.push($scope.data[i]);
      //console.log(last);
    } 
    $timeout(function(){$scope.busyLoadingData = false; }, 3000 );
};

score 0 · Answer 1 · answered Feb 11 '16 at 14:21

Like any infinite scrolling element should do, ng-infinite-scroll is loading more data, than it can display at once. This is to prevent having to less data and having the user reach the bottom even if there is some data left. You can clearly see the effect in this demo. It will start loading data, even if there is still some space left to the bottom of the page.

A simple mistake in ngInfiniteScroll

1 Answers1