Matériau angulaire - Répétition virtuelle

le md-virtual-repeat-container est le conteneur de défilement du composant md-virtual-repeat.

Les attributs

Le tableau suivant répertorie les paramètres et la description des différents attributs de md-virtual-repeat-container.

Sr.Non Paramètre et description
1

md-top-index

Lie l'index de l'élément qui se trouve en haut du conteneur de défilement à $ scope. Il peut à la fois lire et définir la position de défilement.
2

md-orient-horizontal

Détermine si le conteneur doit défiler horizontalement (par défaut, orientation et défilement vertical).
3

md-auto-shrink

Lorsqu'il est présent, le conteneur se rétrécit pour s'adapter au nombre d'articles lorsque ce nombre est inférieur à sa taille d'origine.
4

md-auto-shrink-min

Nombre minimum d'éléments auxquels md-auto-shrink sera réduit (par défaut: 0).

md-répétition virtuelle

La répétition virtuelle est un substitut à ng-repeat pour ne rendre que suffisamment d'éléments html pour remplir le conteneur et les réutiliser lorsque l'utilisateur fait défiler.

Les attributs

Le tableau suivant répertorie les paramètres et la description des différents attributs de md-virtual-repeat.

Sr.Non Paramètre et description
1

md-item-size

La hauteur ou la largeur des éléments répétés (qui doivent être identiques pour chaque élément). Ceci est facultatif. Cela tente de lire la taille du dom s'il manque, mais suppose toujours que tous les nœuds répétés ont la même hauteur ou largeur.
2

md-extra-name

Évalue un nom supplémentaire auquel l'élément itéré actuel peut être attribué sur la portée répétée (nécessaire pour une utilisation dans md-autocomplete).
3

md-on-demand

Lorsqu'il est présent, traite le md-virtual-repeat comme un objet qui peut récupérer des lignes plutôt qu'un tableau.Cet objet doit implémenter l'interface suivante avec deux (2) méthodes -

  • getItemAtIndex - function (index) [object] - L'élément à cet index ou nul s'il n'est pas encore chargé (il devrait commencer à télécharger l'élément dans ce cas).

  • getLength- function () [number] - La longueur des données à laquelle le conteneur du répéteur doit être dimensionné. Idéalement, lorsque le décompte est connu, cette méthode doit le renvoyer. Sinon, retournez un nombre plus élevé que les éléments actuellement chargés pour produire un comportement de défilement infini.

Exemple

L'exemple suivant montre l'utilisation de la répétition virtuelle.

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>

Résultat

Vérifiez le résultat.