Winkelmaterial - Virtuelle Wiederholung
Das md-virtual-repeat-container ist der Bildlaufcontainer für die Komponente md-virtual-repeat.
Attribute
In der folgenden Tabelle sind die Parameter und die Beschreibung der verschiedenen Attribute von aufgeführt md-virtual-repeat-container.
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | md-top-index Bindet den Index des Elements oben im Bildlaufcontainer an $ scope. Es kann die Bildlaufposition sowohl lesen als auch einstellen. |
| 2 | md-orient-horizontal Legt fest, ob der Container horizontal scrollen soll (standardmäßig Ausrichtung und vertikal scrollen). |
| 3 | md-auto-shrink Wenn vorhanden, wird der Behälter verkleinert, um der Anzahl der Elemente zu entsprechen, wenn diese Anzahl unter seiner ursprünglichen Größe liegt. |
| 4 | md-auto-shrink-min Minimale Anzahl von Elementen, auf die md-auto-shrink verkleinert wird (Standard: 0). |
md-virtual-repeat
Die virtuelle Wiederholung ist ein Ersatz für ng-repeat, um nur genügend HTML-Elemente zu rendern, um den Container zu füllen und sie beim Scrollen des Benutzers wiederzuverwenden.
Attribute
In der folgenden Tabelle sind die Parameter und die Beschreibung der verschiedenen Attribute von aufgeführt md-virtual-repeat.
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | md-item-size Die Höhe oder Breite der wiederholten Elemente (die für jedes Element identisch sein müssen). Dies ist optional. Dies versucht, die Größe aus dem Dom zu lesen, wenn sie fehlt, setzt jedoch voraus, dass alle wiederholten Knoten dieselbe Höhe oder Breite haben. |
| 2 | md-extra-name Wertet einen zusätzlichen Namen aus, dem das aktuell iterierte Element im wiederholten Bereich zugewiesen werden kann (erforderlich für die Verwendung in md-autocomplete). |
| 3 | md-on-demand Wenn vorhanden, behandelt die md-virtual-repeat Argument als Objekt, das Zeilen anstelle eines Arrays abrufen kann. Dieses Objekt muss die folgende Schnittstelle mit zwei (2) Methoden implementieren:
|
Beispiel
Das folgende Beispiel zeigt die Verwendung der virtuellen Wiederholung.
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>Ergebnis
Überprüfen Sie das Ergebnis.