Angular Material 虚拟重复
The md-虚拟重复容器 是 md-virtual-repeat 组件的滚动容器。
属性
下表列出了不同属性的参数和说明 md-虚拟重复容器 .
| 序号 | 参数及说明 |
|---|---|
| 1 |
md-顶部索引 将滚动容器顶部的项目的索引绑定到 $scope。它既可以读取也可以设置滚动位置。 |
| 2 |
md-东方-水平 确定容器是否应水平滚动(默认为方向和垂直滚动)。 |
| 3 |
md-自动收缩 当存在时，当该数量小于其原始大小时，容器将缩小以适应项目数量。 |
| 4 |
md-auto-shrink-min md-auto-shrink 将收缩到的最小项目数(默认值：0)。 |
md-虚拟重复
虚拟重复是 ng-repeat 的替代品，它只呈现足够的 html 元素来填充容器并在用户滚动时重用它们。
属性
下表列出了不同属性的参数和说明 md-虚拟重复 .
| 序号 | 参数及说明 |
|---|---|
| 1 |
md-项目大小 重复元素的高度或宽度(每个元素必须相同)。这是可选的。如果丢失，这会尝试从 dom 读取大小，但仍假定所有重复节点具有相同的高度或宽度。 |
| 2 |
md-额外名称 评估为可以在重复范围上分配当前迭代项的附加名称(需要在 md-autocomplete 中使用)。 |
| 3 |
点播 当存在时，对待 md-虚拟重复 参数作为可以获取行而不是数组的对象。该对象必须使用两(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 src = "https:// ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js">
<script src = "https:// ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js">
<script src = "https:// ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js">
<script src = "https:// ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js">
<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>
Result
验证结果。