虚拟重复（Virtual Repeat）

优质

小牛编辑

146浏览

2023-12-01

md-virtual-repeat-container是md-virtual-repeat组件的滚动容器。

属性 (Attributes)

下表列出了md-virtual-repeat-container的不同属性的参数和描述。

Sr.No	参数和描述
1	md-top-index 将位于滚动容器顶部的项目的索引绑定到$ scope。它既可以读取也可以设置滚动位置。
2	md-orient-horizontal 确定容器是否应水平滚动（默认为方向和垂直滚动）。
3	md-auto-shrink 如果存在，当该数量小于其原始大小时，容器将缩小以适合项目数。
4	md-auto-shrink-min md-auto-shrink缩小到的最小项目数（默认值:0）。

md-virtual-repeat

虚拟重复是ng-repeat的替代，只能渲染足够的html元素来填充容器，并在用户滚动时重用它们。

属性 (Attributes)

下表列出了md-virtual-repeat的不同属性的参数和描述。

Sr.No	参数和描述
1	md-item-size 重复元素的高度或宽度（每个元素必须相同）。这是可选的。如果丢失，则尝试从dom读取大小，但仍假定所有重复的节点具有相同的高度或宽度。
2	md-extra-name 计算可在重复范围上分配当前迭代项目的其他名称（在md-autocomplete中使用时需要）。
3	md-on-demand 如果存在，则将md-virtual-repeat参数视为可以获取行而不是数组的对象。此对象必须使用两（2）个方法实现以下接口 - getItemAtIndex - function（index）[object] - 该索引处的项目，如果尚未加载则为null（在这种情况下应该开始下载该项目）。 getLength - function（）[number] - 转发器容器应调整大小的数据长度。理想情况下，当计数已知时，此方法应返回它。否则，返回比当前加载的项更高的数字，以产生无限滚动行为。

Sr.No

参数和描述

md-item-size

重复元素的高度或宽度（每个元素必须相同）。这是可选的。如果丢失，则尝试从dom读取大小，但仍假定所有重复的节点具有相同的高度或宽度。

md-extra-name

计算可在重复范围上分配当前迭代项目的其他名称（在md-autocomplete中使用时需要）。

md-on-demand

如果存在，则将md-virtual-repeat参数视为可以获取行而不是数组的对象。此对象必须使用两（2）个方法实现以下接口 -

getItemAtIndex - function（index）[object] - 该索引处的项目，如果尚未加载则为null（在这种情况下应该开始下载该项目）。
getLength - function（）[number] - 转发器容器应调整大小的数据长度。理想情况下，当计数已知时，此方法应返回它。否则，返回比当前加载的项更高的数字，以产生无限滚动行为。

例子 (Example)

以下示例显示了虚拟重复的使用。

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>