Material Angular - Repetição Virtual

o md-virtual-repeat-container é o contêiner de rolagem para o componente md-virtual-repeat.

Atributos

A tabela a seguir lista os parâmetros e a descrição dos diferentes atributos de md-virtual-repeat-container.

Sr. Não Parâmetro e Descrição
1

md-top-index

Vincula o índice do item que está no topo do contêiner de rolagem a $ scope. Ele pode ler e definir a posição de rolagem.
2

md-orient-horizontal

Determina se o contêiner deve rolar horizontalmente (o padrão é orientação e rolar verticalmente).
3

md-auto-shrink

Quando presente, o contêiner encolherá para caber no número de itens quando esse número for menor que seu tamanho original.
4

md-auto-shrink-min

O número mínimo de itens que o MD-auto-encolher será reduzido para (padrão: 0).

md-virtual-repeat

A repetição virtual é um substituto para ng-repeat para renderizar apenas elementos html suficientes para preencher o contêiner e reutilizá-los quando o usuário rola a tela.

Atributos

A tabela a seguir lista os parâmetros e a descrição dos diferentes atributos de md-virtual-repeat.

Sr. Não Parâmetro e Descrição
1

md-item-size

A altura ou largura dos elementos repetidos (que devem ser idênticos para cada elemento). Isso é opcional. Isso tenta ler o tamanho do dom se ausente, mas ainda assume que todos os nós repetidos têm a mesma altura ou largura.
2

md-extra-name

Avalia um nome adicional ao qual o item iterado atual pode ser atribuído no escopo repetido (necessário para uso no preenchimento automático md).
3

md-on-demand

Quando presente, trata o md-virtual-repeat argumento como um objeto que pode buscar linhas em vez de uma matriz. Este objeto deve implementar a seguinte interface com dois (2) métodos -

  • getItemAtIndex - function (index) [object] - O item nesse índice ou nulo se ainda não estiver carregado (ele deve começar a baixar o item nesse caso).

  • getLength- function () [number] - O comprimento de dados para o qual o recipiente do repetidor deve ser dimensionado. Idealmente, quando a contagem é conhecida, esse método deve retorná-la. Caso contrário, retorne um número maior do que os itens carregados atualmente para produzir um comportamento de rolagem infinita.

Exemplo

O exemplo a seguir mostra o uso de repetição virtual.

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>

Resultado

Verifique o resultado.