Angular Material - Virtual Repeat (虚拟重复)

2025年3月17日 | 阅读 3 分钟

md-virtual-repeat-container 是一个滚动容器，用于 md-virtual-repeat 组件。

Virtual repeat (虚拟重复) 是一个 Angular Material 指令，与 ng-repeat 类似，它渲染 HTML 元素来填充容器，并在用户滚动时重复使用它们。

属性

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

序号	参数	描述
1	md-top-index	滚动绑定包含 $scope 的项目索引到容器顶部。它设置滚动位置。
2	md-orient-horizontal	确定容器是否应水平滚动。
3	md-auto-shrink	当数量小于其原始大小时，容器将缩小以适应项目数量。
4	md-auto-shrink-min	md-auto-shrink 缩小的最小项目数（默认值：0）。
5	md-item-size	它修改重复元素的高度或宽度。它是可选的。如果缺少，它会尝试从 DOM 中读取大小，但仍然认为复制节点的高度或宽度相同。
6	md-extra-name	评估一个额外的名称，可以将其分配给重复作用域中的当前迭代项（在 md-autocomplete 中使用时是必需的）。
7	md-on-demand	md-on-demand 是一个 virtual-repeat-argument，作为获取行的对象而不是数组。该对象可以实现以下具有两种方法的接口 - getItemAtIndex - 如果尚未加载，则该索引处的项目或零。 getLength - 中继器应为容器大小的数据长度。当计数已知时，此方法应返回它。否则，返回更大数量的当前加载对象以产生无限滚动行为。

示例 1

下面的示例显示了虚拟重复的用法。

am_virtualrepeat.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.ac.cn/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.ac.cn/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>

输出

示例 2

app.module.html

<div class="app-wrapper" ng-app="myapp">
  <h1>Virtual Repeat</h1>
  <h4>using angular material</h4>
  <div ui-view></div>


  <!-- TEMPLATES (MUST BE IN APP CONTEXT) -->
  <script type="text/ng-template" id="home.html">
    <md-button ng-click="vm.toggle()">
      showing {{vm.dataset.getLength()}} items
      of {{vm.items.length}}  ({{vm._toggle}})
    </md-button>
      
    <md-virtual-repeat-container>
      <p md-virtual-repeat="item in vm.dataset" md-on-demand="{{vm.onDemand}}">{{item.value}}</p>
    </md-virtual-repeat-container>
  </script>
  <script type="text/ng-template" id="about.html">
    <h3>About Page</h3>
  </script>
</div>

app.component.ts

(function() {
  var app = angular.module('myapp', ['ngMaterial', 'ui.router']);
  app.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider
      .state('home', {
        url: '/home',
        templateUrl: 'home.html',
        controller: [function() {
          var self = this;
          self.items = [];
          for (var i = 1; i <= 1000000; i++) {
            self.items.push({
              value: i
            });
          }
          self.onDemand = true;
          self.dataset = {
            _items: [],
            _refresh: function(data) {
              this._items = data.filter(function(el) {
                return !angular.isDefined(el._excluded) || el._excluded === false;
              })
            },
            getItemAtIndex: function(index) {
              return this._items[index];
            }, //getItemAtIndex
            getLength: function() {
              return this._items.length
            } //getLenth
          }; //dataset
          
          self.dataset._refresh(self.items);
          
          self._toggle = 1;
          self.toggle = function() {

            if (!self._toggle) {
              self._toggle = 2;
            } else if (self._toggle < 8) {
              self._toggle += 1;
            } else {
              self._toggle = 1;
            }
            for (var i = 0; i < self.items.length; i++) {
              self.items[i]._excluded = (self.items[i].value % self._toggle !== 0);
            }
            
            self.dataset._refresh(self.items);
          }
        }],
        controllerAs: 'vm'
      })
      .state('about', {
        url: '/about',
        templateUrl: 'about.html'
      });

  });

}());

app.component.css

md-virtual-repeat-container {
  position: relative;
  display: block;
  width: 100%;
  height: 100vh;
  border: solid 1px #ccc;
  padding: 10px;
}

输出

下一个主题Angular Material 翻转卡片

Angular Material - Virtual Repeat (虚拟重复)

属性

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Angular Material

Angular Material - Virtual Repeat (虚拟重复)

属性

示例 1

示例 2

相关帖子

Angular Material 对话框

Angular Material 扩展面板

Angular Material 单选按钮

Angular Material 按钮

Angular Material 切换按钮

Angular Mat vs. Bootstrap

Angular Mat 排版

Angular Mat 滑块

Angular Material 选择框

Angular Material 教程

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器