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 -
|
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.