Учебники

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

Декабрь 8, 2018

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

Атрибуты

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

Sr.No Параметр и описание
1

мкр-топ-индекс

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

2

мкр-Orient-горизонтальный

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

3

мкр-авто термоусадочные

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

4

мкр-авто-термоусадочная мин

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

мкр-топ-индекс

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

мкр-Orient-горизонтальный

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

мкр-авто термоусадочные

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

мкр-авто-термоусадочная мин

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

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

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

Атрибуты

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

Sr.No Параметр и описание
1

мкр-элемент размера

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

2

мкр-экстра-имя

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

3

мкр-по-запросу

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

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

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

мкр-элемент размера

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

мкр-экстра-имя

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

мкр-по-запросу

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

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

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

пример

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

am_virtualrepeat.htm

Live Demo

<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>

Результат

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

42
Share: