Açısal Malzeme - Sanal Tekrar

md-virtual-repeat-container md-sanal tekrar bileşeni için kaydırma kabıdır.

Öznitellikler

Aşağıdaki tablo farklı özniteliklerin parametrelerini ve açıklamalarını listeler. md-virtual-repeat-container.

Sr.No	Parametre ve Açıklama
1	md-top-index Kaydırma kapsayıcısının üstündeki öğenin dizinini $ kapsamına bağlar. Kaydırma konumunu hem okuyabilir hem de ayarlayabilir.
2	md-orient-horizontal Kabın yatay olarak kaydırılıp kaydırılmayacağını belirler (varsayılan olarak yönlendirme ve dikey kaydırmadır).
3	md-auto-shrink Mevcut olduğunda, bu sayı orijinal boyutundan daha az olduğunda kap, öğelerin sayısına sığacak şekilde küçülür.
4	md-auto-shrink-min MD-otomatik küçültmenin küçültüleceği minimum öğe sayısı (varsayılan: 0).

md-sanal-tekrar

Sanal yineleme, yalnızca kapsayıcıyı doldurmaya ve kullanıcı kaydırdığında bunları yeniden kullanmaya yetecek kadar html öğesi oluşturan ng-yinelemenin yerine geçer.

Öznitellikler

Aşağıdaki tablo farklı özniteliklerin parametrelerini ve açıklamalarını listeler. md-virtual-repeat.

Sr.No	Parametre ve Açıklama
1	md-item-size Tekrarlanan öğelerin yüksekliği veya genişliği (her öğe için aynı olmalıdır). Bu isteğe bağlıdır. Bu, eksikse dom'dan boyutu okumaya çalışır, ancak yine de tüm tekrarlanan düğümlerin aynı yüksekliğe veya genişliğe sahip olduğunu varsayar.
2	md-extra-name Geçerli yinelenen öğenin yinelenen kapsamda atanabileceği ek bir ad olarak değerlendirir (md-otomatik tamamlamada kullanım için gereklidir).
3	md-on-demand Mevcut olduğunda, tedavi eder md-virtual-repeat Bir dizi yerine satırları getirebilen bir nesne olarak argüman.Bu nesne aşağıdaki arayüzü iki (2) yöntemle uygulamalıdır - getItemAtIndex - işlev (dizin) [nesne] - Bu dizindeki öğe veya henüz yüklenmemişse boş (bu durumda öğeyi indirmeye başlamalıdır). getLength- function () [sayı] - Yineleyici kabının boyutlandırılması gereken veri uzunluğu. İdeal olarak, sayım bilindiğinde, bu yöntem onu döndürmelidir. Aksi takdirde, sonsuz kaydırma davranışı oluşturmak için halihazırda yüklü öğelerden daha yüksek bir sayı döndürün.

Misal

Aşağıdaki örnek, sanal yinelemenin kullanımını gösterir.

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>

Sonuç

Sonucu doğrulayın.