ionic-framework/test/html/collection-repeat/basic-list.html

<!DOCTYPE html>
<html ng-app="ionic">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Sample UL</title>

    <link  href="/dist/css/ionic.css" rel="stylesheet">
    <script src="/dist/js/ionic.bundle.js"></script>
    <script src="stats.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <ion-header-bar class="bar-positive">
      <button class="button" ng-click="$root.showDelete = !$root.showDelete">Toggle Delete</button>
      <h1 class="title">Basic List: Static Dimensions</h1>
      <button class="button" ng-click="clearList()">Clear List</button>
    </ion-header-bar>
    <ion-content>
      <h4 style="margin: 80px;">I have 80px margin</h4>
      <ion-list>
        <ion-item class="item card" collection-repeat="item in items" item-height="50px">
          <ion-option-button>Button</ion-option-button>
          <ion-delete-button  class="ion-minus-circled" ng-click="items.splice($index, 1)"></ion-delete-button>
          <h2>{{item.text}}</h2>
        </ion-item>
      </ion-list>
      <h2>Stuff after list</h2>
      <div class="card">Hello</div>
    </ion-content>
  <script>
angular.module('ionic').controller('MainCtrl',MainCtrl)
function MainCtrl($scope, $timeout) {
  $scope.items = [];

  function addImage() {
    var i = $scope.items.length;
    $scope.items.push({
      text: 'Item ' + i,
      image: 'http://placekitten.com/'+(100+50%i)+'/'+(100+50%i)
    });
  }
  init();

  $scope.clearList = function() {
    $scope.items.length = 0;
    init();
  };

  function init() {
    $timeout(function() {
      for (var i = 0; i < 100; i++) addImage();
    }, 1000);
  }
}
  </script>
  <style>
  </style>
</body>
</html>