Vật liệu góc - Lặp lại ảo
Các md-virtual-repeat-container là vùng chứa cuộn cho thành phần md-virtual-repeat.
Thuộc tính
Bảng sau liệt kê các tham số và mô tả về các thuộc tính khác nhau của md-virtual-repeat-container.
| Sr.No | Mô tả về Thông Số |
|---|---|
| 1 | md-top-index Liên kết chỉ mục của mục ở đầu vùng chứa cuộn với $ scope. Nó có thể vừa đọc vừa đặt vị trí cuộn. |
| 2 | md-orient-horizontal Xác định xem vùng chứa có nên cuộn theo chiều ngang hay không (mặc định là định hướng và cuộn theo chiều dọc). |
| 3 | md-auto-shrink Khi hiện diện, thùng chứa sẽ co lại để phù hợp với số lượng mặt hàng khi số lượng đó nhỏ hơn kích thước ban đầu. |
| 4 | md-auto-shrink-min Số mục tối thiểu md-tự động thu nhỏ sẽ thu nhỏ thành (mặc định: 0). |
md-virtual-repeat
Lặp lại ảo là sự thay thế cho ng-repeat để chỉ hiển thị đủ các phần tử html để lấp đầy vùng chứa và sử dụng lại chúng khi người dùng cuộn.
Thuộc tính
Bảng sau liệt kê các tham số và mô tả về các thuộc tính khác nhau của md-virtual-repeat.
| Sr.No | Mô tả về Thông Số |
|---|---|
| 1 | md-item-size Chiều cao hoặc chiều rộng của các phần tử lặp lại (phải giống nhau cho mỗi phần tử). Đây là tùy chọn. Điều này cố gắng đọc kích thước từ dom nếu bị thiếu, nhưng vẫn giả định rằng tất cả các nút lặp lại có cùng chiều cao hoặc chiều rộng. |
| 2 | md-extra-name Đánh giá cho một tên bổ sung mà mục được lặp lại hiện tại có thể được chỉ định trên phạm vi lặp lại (cần thiết để sử dụng trong md-autocomplete). |
| 3 | md-on-demand Khi hiện tại, xử lý md-virtual-repeat là một đối tượng có thể tìm nạp các hàng thay vì một mảng. Đối tượng này phải triển khai giao diện sau với hai (2) phương thức:
|
Thí dụ
Ví dụ sau đây cho thấy việc sử dụng lặp lại ảo.
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>Kết quả
Xác minh kết quả.