Skip to content

Instantly share code, notes, and snippets.

@d4dilip

d4dilip/Infinite-Scroll-App-Example.markdown

Created July 26, 2014 10:00
Show Gist options
  • Save d4dilip/53b72de1609ee8193d86 to your computer and use it in GitHub Desktop.
Save d4dilip/53b72de1609ee8193d86 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Dilip.
Raw
index.html
<html ng-app="ionicInfiniteScrollApp">
<head lang="en">
<meta charset="UTF-8">
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
<script src="app.js"></script>
<title>Infinite App Example </title>
</head>
<body ng-controller="InfiniteAppCntrl">
<ion-content>
<ion-header-bar >{{items.length}} items</ion-header-bar>
</ion-content>
<ion-content class="has-header">
<ion-list>
<ion-item ng-repeat="item in items" item="item" href="#{{item.id}}">
Item {{item.id}}
</ion-item>
<ion-infinite-scroll distance="2"
on-infinite="loadMoreData()"
ng-if="!moredata"
></ion-infinite-scroll>
</ion-list>
</ion-content>
</body>
</html>
Raw
Infinite-Scroll-App-Example.markdown
Raw
script.js
/**
* Created by singhdi on 2014-07-26.
*/
var app = angular.module("ionicInfiniteScrollApp",['ionic']);
app.controller("InfiniteAppCntrl",function($scope){
$scope.moredata = false;
debugger;
$scope.loadMoreData=function()
{
$scope.items.push({id: $scope.items.length});
if($scope.items.length==100)
{
$scope.moredata=true;
}
$scope.$broadcast('scroll.infiniteScrollComplete');
};
$scope.items=[];
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment