md-virtual-repeat-container 是md-virtual-repeat组件的滚动容器.
下表列出了 md-virtual-repeat-container 的不同属性的参数和描述.
Sr.No | 参数&说明 |
---|---|
1 | md-top-index 将滚动容器顶部的项目索引绑定到$ scope.它既可以读取也可以设置滚动位置. |
2 | md-orient-horizontal 确定容器是否应水平滚动(默认为方向和垂直滚动). |
3 | md-auto-shrink 当存在时,容器将缩小以适合该数量小于其原始大小的项目数. |
4 | md- auto-shrink-min <b $ bmd-auto-shrink缩小到的最小项目数(默认值:0). |
虚拟重复是ng-repeat的替代品,只能渲染足够的html用户填充容器并在用户滚动时重复使用它们.
下表列出了不同att的参数和说明 md-virtual-repeat 的ributes.
Sr.No | 参数&说明 |
---|---|
1 | md-item-size 重复元素的高度或宽度(每个元素必须相同).这是可选的.如果丢失,这会尝试从dom读取大小,但仍假定所有重复的节点具有相同的高度或宽度. |
2 | md-extra-name 评估到可以在重复范围上分配当前迭代项目的附加名称(需要在md-autocomplete中使用). |
3 | md-on-demand 何时present,将 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>
验证结果.