I have two scroll tags. Inside each of these ion scrolling tags is a list. Each of these lists starts with 10 points, and when the user reaches the bottom of a specific ion scroll, he should load more. The problem I am facing is that it does not work correctly. If I view the first scroll window and paginate across all elements, it should not indicate more content. However, this does not happen, instead, if I scroll the second scroll window, it will load more items in the first and second ion scroll windows (which I don't want). In fact, I would like the two ion scrolls to be completely independent of each other. I would like everyone to upload their own content. Hope that made sense. Here is my code:
http://codepen.io/polska03/pen/jWKRwP
HTML:
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Ionic Pull to Refresh</title> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> </head> <body ng-app="ionicApp" ng-controller="MyCtrl" class="background-places"> <ion-view> <ion-content class="" scroll='false'> <ion-scroll style="height:50%"> <ion-list> <ion-item collection-repeat="list in _list"> <h2>Item</h2> </ion-item> </ion-list> <button class="button button-full button-outline button-positive" ng-if="noMoreContent"> No more Content </button> <ion-infinite-scroll ng-if="canWeLoadMoreContent()" on-infinite="populateList()" distance="1%"> </ion-infinite-scroll> </ion-scroll> <hr> <hr> <ion-scroll style="height:50%"> <ion-list> <ion-item collection-repeat="list2 in _list2"> <h2>Item</h2> </ion-item> </ion-list> <button class="button button-full button-outline button-positive" ng-if="noMoreContent2"> No More Content </button> <ion-infinite-scroll ng-if="canWeLoadMoreContent2()" on-infinite="populateList2()" distance="1%"> </ion-infinite-scroll> </ion-scroll> </ion-content> </ion-view> </body> </html>
JavaScript:
angular.module('ionicApp', ['ionic']) .controller('MyCtrl', function($scope) { $scope._list = []; $scope.populateList = function() { for (var i = 0; i <= 9; i++) { $scope._list.push({}); } console.log($scope._list.length); $scope.$broadcast('scroll.infiniteScrollComplete'); } $scope.noMoreContent = false; $scope.canWeLoadMoreContent = function() { if($scope._list.length > 15) { $scope.noMoreContent = true; return false; }else{ return true; } } $scope.populateList(); $scope._list2 = []; $scope.populateList2 = function() { for (var i = 0; i <= 9; i++) { $scope._list2.push({}); } console.log($scope._list2.length); $scope.$broadcast('scroll.infiniteScrollComplete'); } $scope.noMoreContent2 = false; $scope.canWeLoadMoreContent2 = function() { if($scope._list2.length > 15) { $scope.noMoreContent2 = true; return false; }else{ return true; } } $scope.populateList2(); });
source share