Bahan Sudut - Pengulangan Virtual

Itu md-virtual-repeat-container adalah wadah gulir untuk komponen md-virtual-repeat.

Atribut

Tabel berikut mencantumkan parameter dan deskripsi dari atribut yang berbeda md-virtual-repeat-container.

Sr Tidak Parameter & Deskripsi
1

md-top-index

Mengikat indeks item yang berada di bagian atas wadah gulir ke $ scope. Itu bisa membaca dan mengatur posisi gulir.

2

md-orient-horizontal

Menentukan apakah penampung harus di-scroll secara horizontal (default ke orientasi dan di-scroll secara vertikal).

3

md-auto-shrink

Saat ada, wadah akan menyusut agar sesuai dengan jumlah item jika jumlahnya kurang dari ukuran aslinya.

4

md-auto-shrink-min

Jumlah minimum item yang md-auto-shrink akan menyusut menjadi (default: 0).

md-virtual-repeat

Pengulangan virtual adalah pengganti ng-repeat untuk merender elemen html yang cukup untuk mengisi penampung dan menggunakannya kembali saat pengguna menggulir.

Atribut

Tabel berikut mencantumkan parameter dan deskripsi dari atribut yang berbeda md-virtual-repeat.

Sr Tidak Parameter & Deskripsi
1

md-item-size

Tinggi atau lebar elemen berulang (yang harus identik untuk setiap elemen). Ini opsional. Ini mencoba membaca ukuran dari dom jika tidak ada, tetapi masih mengasumsikan bahwa semua node berulang memiliki tinggi atau lebar yang sama.

2

md-extra-name

Mengevaluasi ke nama tambahan yang item iterasi saat ini dapat ditetapkan pada cakupan berulang (diperlukan untuk digunakan dalam md-autocomplete).

3

md-on-demand

Saat hadir, perlakukan md-virtual-repeat argumen sebagai objek yang dapat mengambil baris daripada array. Objek ini harus mengimplementasikan antarmuka berikut dengan dua (2) metode -

  • getItemAtIndex - function (index) [object] - Item pada indeks itu atau null jika belum dimuat (dalam kasus itu harus mulai mendownload item).

  • getLength- function () [number] - Panjang data yang harus diukur container repeater. Idealnya, ketika hitungannya diketahui, metode ini harus mengembalikannya. Jika tidak, kembalikan angka yang lebih tinggi dari item yang saat ini dimuat untuk menghasilkan perilaku gulir tak terbatas.

Contoh

Contoh berikut menunjukkan penggunaan pengulangan 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>

Hasil

Verifikasi hasilnya.