Materiale angolare - Ripetizione virtuale

Il md-virtual-repeat-container è il contenitore di scorrimento per il componente md-virtual-repeat.

Attributi

La tabella seguente elenca i parametri e la descrizione dei diversi attributi di md-virtual-repeat-container.

Suor n Parametro e descrizione
1

md-top-index

Associa l'indice dell'elemento che si trova nella parte superiore del contenitore di scorrimento a $ scope. Può sia leggere che impostare la posizione di scorrimento.
2

md-orient-horizontal

Determina se il contenitore deve scorrere in orizzontale (l'impostazione predefinita è l'orientamento e lo scorrimento verticale).
3

md-auto-shrink

Quando è presente, il contenitore si ridurrà per adattarsi al numero di articoli quando tale numero è inferiore alla sua dimensione originale.
4

md-auto-shrink-min

Numero minimo di elementi a cui si ridurrà md-auto-shrink (predefinito: 0).

md-virtual-repeat

La ripetizione virtuale è un sostituto di ng-repeat per rendere solo gli elementi HTML sufficienti per riempire il contenitore e riutilizzarli quando l'utente scorre.

Attributi

La tabella seguente elenca i parametri e la descrizione dei diversi attributi di md-virtual-repeat.

Suor n Parametro e descrizione
1

md-item-size

L'altezza o la larghezza degli elementi ripetuti (che deve essere identica per ogni elemento). Questo è opzionale. Questo tenta di leggere la dimensione dal dominio se mancante, ma presume comunque che tutti i nodi ripetuti abbiano la stessa altezza o larghezza.
2

md-extra-name

Valuta un nome aggiuntivo a cui è possibile assegnare l'elemento corrente iterato nell'ambito ripetuto (necessario per l'uso in md-autocomplete).
3

md-on-demand

Quando è presente, tratta il file md-virtual-repeat argomento come un oggetto che può recuperare righe anziché un array.Questo oggetto deve implementare la seguente interfaccia con due (2) metodi:

  • getItemAtIndex - function (index) [object] - L'elemento in quell'indice o null se non è ancora caricato (dovrebbe iniziare a scaricare l'elemento in quel caso).

  • getLength- function () [numero] - La lunghezza dei dati alla quale dovrebbe essere dimensionato il contenitore del ripetitore. Idealmente, quando il conteggio è noto, questo metodo dovrebbe restituirlo. In caso contrario, restituire un numero maggiore degli elementi attualmente caricati per produrre un comportamento di scorrimento infinito.

Esempio

L'esempio seguente mostra l'uso della ripetizione virtuale.

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>

Risultato

Verifica il risultato.