Cordova android: Loading data from infinite scroll database in onsenui

Question

I am developing a hybrid mobile application with Onsenui and Cordova on Android, in which I want to display some data on the home page and load more items as I scroll down. I know this is achieved with ons-infinite-scroll Here's what I 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 scrolling down replaces old data with new . How can I fix it ?. I also want to stop scrolling after retrieving 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)); } 

Answer 1

You rewrite all of your elements with $scope.items=msg.data; every time you execute a request. Just add new elements to the end of $scope.items . Alternatively, you can check ons-lazy-repeat as there is no more support for <ons-scroller infinite-scroll> : http://onsen.io/guide/overview.html#UsingLazyRepeat