วัสดุเชิงมุม - ทำซ้ำเสมือนจริง
md-virtual-repeat-container เป็นที่เก็บเลื่อนสำหรับคอมโพเนนต์ md-virtual-repeat
คุณลักษณะ
ตารางต่อไปนี้แสดงรายการพารามิเตอร์และคำอธิบายของคุณลักษณะต่างๆของ md-virtual-repeat-container.
| ซีเนียร์ No | พารามิเตอร์และคำอธิบาย |
|---|---|
| 1 | md-top-index ผูกดัชนีของไอเท็มที่อยู่ด้านบนสุดของ scroll container กับ $ scope สามารถอ่านและตั้งค่าตำแหน่งเลื่อนได้ |
| 2 | md-orient-horizontal กำหนดว่าคอนเทนเนอร์ควรเลื่อนในแนวนอนหรือไม่ (ค่าเริ่มต้นคือการวางแนวและการเลื่อนในแนวตั้ง) |
| 3 | md-auto-shrink เมื่อมีอยู่ภาชนะจะหดลงเพื่อให้พอดีกับจำนวนรายการเมื่อจำนวนนั้นน้อยกว่าขนาดเดิม |
| 4 | md-auto-shrink-min จำนวนขั้นต่ำของรายการที่ md-auto-shrink จะลดขนาดเป็น (ค่าเริ่มต้น: 0) |
md-virtual-repeat
การทำซ้ำเสมือนเป็นการแทนที่ ng-repeat เพื่อแสดงผลเฉพาะองค์ประกอบ html ที่เพียงพอที่จะเติมคอนเทนเนอร์และนำมาใช้ใหม่เมื่อผู้ใช้เลื่อน
คุณลักษณะ
ตารางต่อไปนี้แสดงรายการพารามิเตอร์และคำอธิบายของคุณลักษณะต่างๆของ md-virtual-repeat.
| ซีเนียร์ No | พารามิเตอร์และคำอธิบาย |
|---|---|
| 1 | md-item-size ความสูงหรือความกว้างขององค์ประกอบที่ซ้ำกัน (ซึ่งต้องเหมือนกันสำหรับแต่ละองค์ประกอบ) นี่เป็นทางเลือก สิ่งนี้จะพยายามอ่านขนาดจากโดมหากขาดหายไป แต่ยังถือว่าโหนดที่ซ้ำกันทั้งหมดมีความสูงหรือความกว้างเท่ากัน |
| 2 | md-extra-name ประเมินเป็นชื่อเพิ่มเติมที่สามารถกำหนดรายการที่ทำซ้ำในปัจจุบันบนขอบเขตที่ทำซ้ำได้ (จำเป็นสำหรับใช้ใน md-autocomplete) |
| 3 | md-on-demand เมื่อมีอยู่ให้ถือว่า md-virtual-repeat อาร์กิวเมนต์เป็นอ็อบเจ็กต์ที่สามารถดึงข้อมูลแถวแทนที่จะเป็นอาร์เรย์อ็อบเจ็กต์นี้ต้องใช้อินเทอร์เฟซต่อไปนี้ด้วยสอง (2) วิธี -
|
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงการใช้การทำซ้ำเสมือน
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>ผลลัพธ์
ตรวจสอบผลลัพธ์