Material angular - Repetición virtual

los md-virtual-repeat-container es el contenedor de desplazamiento para el componente md-virtual-repeat.

Atributos

La siguiente tabla enumera los parámetros y la descripción de los diferentes atributos de md-virtual-repeat-container.

No Señor Descripción de parámetros
1

md-top-index

Vincula el índice del elemento que se encuentra en la parte superior del contenedor de desplazamiento a $ scope. Puede leer y establecer la posición de desplazamiento.
2

md-orient-horizontal

Determina si el contenedor debe desplazarse horizontalmente (el valor predeterminado es la orientación y el desplazamiento vertical).
3

md-auto-shrink

Cuando está presente, el contenedor se encogerá para ajustarse al número de artículos cuando ese número sea menor que su tamaño original.
4

md-auto-shrink-min

Número mínimo de elementos a los que md-auto-shrink se reducirá (predeterminado: 0).

md-virtual-repeat

La repetición virtual es un sustituto de ng-repeat para representar solo los elementos html suficientes para llenar el contenedor y reutilizarlos cuando el usuario se desplaza.

Atributos

La siguiente tabla enumera los parámetros y la descripción de los diferentes atributos de md-virtual-repeat.

No Señor Descripción de parámetros
1

md-item-size

El alto o ancho de los elementos repetidos (que deben ser idénticos para cada elemento). Esto es opcional. Esto intenta leer el tamaño del dom si falta, pero aún asume que todos los nodos repetidos tienen la misma altura o ancho.
2

md-extra-name

Evalúa a un nombre adicional al que se puede asignar el elemento iterado actual en el alcance repetido (necesario para su uso en md-autocomplete).
3

md-on-demand

Cuando está presente, trata el md-virtual-repeat argumento como un objeto que puede obtener filas en lugar de una matriz. Este objeto debe implementar la siguiente interfaz con dos (2) métodos:

  • getItemAtIndex - función (índice) [objeto] - El elemento en ese índice o nulo si aún no está cargado (debería comenzar a descargar el elemento en ese caso).

  • getLength- function () [number] - La longitud de datos a la que se debe dimensionar el contenedor del repetidor. Idealmente, cuando se conoce el recuento, este método debería devolverlo. De lo contrario, devuelva un número mayor que los elementos cargados actualmente para producir un comportamiento de desplazamiento infinito.

Ejemplo

El siguiente ejemplo muestra el uso de la repetición 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

Verifica el resultado.