Cordova android:Loading data from database with infinite scrolling in onsenui

Question

I am developing a hybrid mobile app with Onsenui and Cordova in android in which i want to display some data in home page and load more items when scroll down. I know this is accomplished using ons-infinite-scroll Here is what i am tried

<ons-scroller
       infinit-scroll-enable="true"  can-load="true" on-scrolled="populateList()" threshold="2" style="height:100%">
<div ng-repeat="item in items">
 //display the data
</div>
</ons-scroller>

Js

module.controller('AppController', function($scope,$http) {
   //for initial loading
   $scope.items=new Array();
   $scope.page=1;
    $http.get(url+"getlotterylist").then(function(msg){
        $scope.loading=false;
        $scope.items=msg.data;
    });
 //load more when scrolls down
     $scope.populateList=function(){


        $http.get(url+"getlotterylist&&page="+$scope.page).then(function(msg){
            $scope.items=msg.data;
             $scope.page +=1;
    });
    }

}

The actual problem is when scroll down it replaces the old data with new .How can i resolve it?.Also i want to stop the scrolling after fetching all the data

php

function get_lottery_list(){
    $limit=7;
    $page=(isset($_GET['page']))?$_GET['page']:1;
    $start=($page-1)*$limit;
    $connect=db_connect();
    $result=$connect->prepare("SELECT * FROM `daily_draw_details` ORDER BY `id` DESC LIMIT $start,$limit");
    $result->execute();
    echo json_encode($result->fetchAll(PDO::FETCH_ASSOC));
  }

score 0 · Answer 1 · answered Aug 10 '15 at 02:56

You are overwriting all your items with $scope.items=msg.data; every time you do a request. Just append the new items to the end of $scope.items instead. Also, you may want to check ons-lazy-repeat since there is no more support for <ons-scroller infinite-scroll>: http://onsen.io/guide/overview.html#UsingLazyRepeat

Cordova android:Loading data from database with infinite scrolling in onsenui

1 Answers1