sunnycyk/example.html

## example.html
<html ng-app="myApp">

   <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Ionic List Directive</title>

    <link href="http://code.ionicframework.com/0.9.24/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/0.9.24/js/ionic.bundle.min.js"></script>
  </head>

  <body>
    <pane ng-controller="MainCtrl">
         <header-bar title="'Infinite Scroll Example'">
          </header-bar>
        <content has-header="true"  padding="true" on-infinite-scroll="addMoreItem">
          <div class=" list padding">
            <div ng-repeat="item in items | limitTo:numberOfItemsToDisplay" class="item" type="item-text-wrap">
              <h3>{{item}}</h3>
            </div>
          </div>
        </content>
    </pane>

  </body>

</html>

## infinitescroll.js
angular.module('myApp', ['ionic'])
  .controller('MainCtrl', function($scope) {
      $scope.numberOfItemsToDisplay = 20; // number of item to load each time
      $scope.items = getData();

      function getData() {
        var a = [];
        for (var i=1; i< 1000; i++) {
            a.push(i);
        }

        return a;
      }
      $scope.addMoreItem = function(done) {
        if ($scope.items.length > $scope.numberOfItemsToDisplay)
          $scope.numberOfItemsToDisplay += 20; // load 20 more items
        done(); // need to call this when finish loading more data
      }

    });
	<html ng-app="myApp">

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>Ionic List Directive</title>

	<link href="http://code.ionicframework.com/0.9.24/css/ionic.min.css" rel="stylesheet">
	<script src="http://code.ionicframework.com/0.9.24/js/ionic.bundle.min.js"></script>
	</head>

	<body>
	<pane ng-controller="MainCtrl">
	<header-bar title="'Infinite Scroll Example'">
	</header-bar>
	<content has-header="true" padding="true" on-infinite-scroll="addMoreItem">
	<div class=" list padding">
	<div ng-repeat="item in items \| limitTo:numberOfItemsToDisplay" class="item" type="item-text-wrap">
	<h3>{{item}}</h3>
	</div>
	</div>
	</content>
	</pane>

	</body>

	</html>
	angular.module('myApp', ['ionic'])
	.controller('MainCtrl', function($scope) {
	$scope.numberOfItemsToDisplay = 20; // number of item to load each time
	$scope.items = getData();

	function getData() {
	var a = [];
	for (var i=1; i< 1000; i++) {
	a.push(i);
	}

	return a;
	}
	$scope.addMoreItem = function(done) {
	if ($scope.items.length > $scope.numberOfItemsToDisplay)
	$scope.numberOfItemsToDisplay += 20; // load 20 more items
	done(); // need to call this when finish loading more data
	}

	});