Угловой материал - виртуальный повтор

В md-virtual-repeat-container - это контейнер прокрутки для компонента md-virtual-repeat.

Атрибуты

В следующей таблице перечислены параметры и описание различных атрибутов md-virtual-repeat-container.

Старший Нет Параметр и описание
1

md-top-index

Связывает индекс элемента, который находится вверху контейнера прокрутки, с $ scope. Он может как читать, так и устанавливать положение прокрутки.

2

md-orient-horizontal

Определяет, должен ли контейнер прокручиваться по горизонтали (по умолчанию используется ориентация и вертикальная прокрутка).

3

md-auto-shrink

Если контейнер присутствует, он сжимается, чтобы соответствовать количеству элементов, если это количество меньше его исходного размера.

4

md-auto-shrink-min

Минимальное количество элементов, до которых будет сжиматься md-auto-shrink (по умолчанию: 0).

md-виртуальный-повтор

Виртуальный повтор является заменой ng-repeat для визуализации достаточного количества html-элементов для заполнения контейнера и их повторного использования при прокрутке пользователем.

Атрибуты

В следующей таблице перечислены параметры и описание различных атрибутов md-virtual-repeat.

Старший Нет Параметр и описание
1

md-item-size

Высота или ширина повторяющихся элементов (которые должны быть идентичны для каждого элемента). Это необязательно. Это пытается прочитать размер из dom, если он отсутствует, но все же предполагает, что все повторяющиеся узлы имеют одинаковую высоту или ширину.

2

md-extra-name

Оценивает дополнительное имя, которому может быть назначен текущий повторяемый элемент в повторяющейся области (необходимо для использования в md-autocomplete).

3

md-on-demand

Когда присутствует, лечит md-virtual-repeat аргумент как объект, который может извлекать строки, а не массив. Этот объект должен реализовывать следующий интерфейс с двумя (2) методами:

  • getItemAtIndex - function (index) [object] - элемент с этим индексом или null, если он еще не загружен (в этом случае он должен начать загрузку элемента).

  • getLength- function () [number] - длина данных, до которой должен соответствовать размер контейнера репитера. В идеале, когда счетчик известен, этот метод должен его вернуть. В противном случае верните большее число, чем у загруженных в данный момент элементов, чтобы получить поведение бесконечной прокрутки.

пример

В следующем примере показано использование виртуального повтора.

am_virtualrepeat.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style>
         .vrepeatContainer #horizontal-container {
            height: 100px;
            width: 830px; 
         }

         .vrepeatContainer #vertical-container {
            height: 292px;
            width: 400px; 
         }

         .vrepeatContainer .repeated-item-horizontal {
            border-right: 1px solid #ddd;
            box-sizing: border-box;
            display: inline-block;
            height: 84px;
            padding-top: 35px;
            text-align: center;
            width: 50px; 
         }

         .vrepeatContainer .repeated-item-vertical {
            border-bottom: 1px solid #ddd;
            box-sizing: border-box;
            height: 40px;
            padding-top: 10px;
         }

         .vrepeatContainer md-content {
            margin: 16px; 
         }
         
         .vrepeatContainer md-virtual-repeat-container {
            border: solid 1px grey; 
         }	  
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('vrepeatController', vrepeatController);
           
         function vrepeatController ($scope) { 
            this.items = [];
            for (var i = 0; i < 1000; i++) {
               this.items.push(i);
            }
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div class = "vrepeatContainer" ng-controller = "vrepeatController as ctrl"
         ng-cloak>
         <md-content layout = "column">
            <h2>Horizontal Repeat</h2>
            <md-virtual-repeat-container id = "horizontal-container" md-orient-horizontal>
               <div md-virtual-repeat = "item in ctrl.items"
                  class = "repeated-item-horizontal" flex>
                  {{item}}
               </div>
            </md-virtual-repeat-container>
            
            <h2>Vertical Repeat</h2>
            <md-virtual-repeat-container id = "vertical-container">
               <div md-virtual-repeat = "item in ctrl.items"
                  class = "repeated-item-vertical" flex>
                  {{item}}
               </div>
            </md-virtual-repeat-container>
            
         </md-content>
      </div>
   </body>
</html>

Результат

Проверьте результат.