sample/index.html at master · blk-ocean/sample · 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
46
47
48
49
50
51
52
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Horizontal Usage</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

  <link rel='stylesheet prefetch' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.css'>
<link rel='stylesheet prefetch' href='https://material.angularjs.org/1.1.1/docs.css'>

      <link rel="stylesheet" href="css/style.css">


</head>

<body>
  <div ng-controller="AppCtrl as ctrl" ng-cloak="" class="virtualRepeatdemoHorizontalUsage" ng-app="MyApp">
  <md-content layout="column">
    <p>
       Display 1000 item in a virtual-list with viewport of only 16 columns (width=50px).
       <br><br>
       This demo shows scroll and rendering performance gains when using <code>md-virtual-repeat</code>;
       achieved with the dynamic reuse of rows visible in the viewport area. Developers are required to
       explicitly use <code>md-virtual-repeat-container</code> as a wrapping parent container.
    </p>

    <md-virtual-repeat-container id="horizontal-container" md-orient-horizontal="">
      <div md-virtual-repeat="item in ctrl.items | limitTo:limit" class="repeated-item" flex="">
        {{item}}
      </div>
    </md-virtual-repeat-container>
  </md-content>
<button ng-click='loadMore()'>Load More</button>
</div>


<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license.
-->
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js'></script>
<script src='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js'></script>

    <script src="js/index.js"></script>

</body>
</html>