ionic/test/html/collection-repeat/basic-grid.html at 1.x · CssFormWork/ionic · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!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">
      <h1 class="title">Basic Grid: Dynamic Dimensions</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list can-swipe="true">
        <ion-item class="item"
          collection-repeat="item in items"
          collection-item-height="65 + (($index % 3) * 10)"
          collection-item-width="(10 + ($index % 10))+ '%'">
          <h2>{{item.text}}</h2>
        </ion-item>
      </ion-list>
    </ion-content>
  <script>
angular.module('ionic').controller('MainCtrl',MainCtrl)
function MainCtrl($scope, $ionicScrollDelegate, $timeout, $q, $ionicLoading, $ionicModal) {
  $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)
    });
  }
  for (var i = 0; i < 10000; i++) addImage();
}
  </script>
  <style>
  </style>
</body>
</html>