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:

  • getItemAtIndex - function (index) [object] - Mục tại chỉ mục đó hoặc null nếu nó chưa được tải (nó sẽ bắt đầu tải xuống mục trong trường hợp đó).

  • getLength- function () [number] - Độ dài dữ liệu mà vùng chứa bộ lặp nên được định kích thước. Tốt nhất, khi đã biết số lượng, phương thức này sẽ trả về nó. Nếu không, hãy trả về một số cao hơn các mục hiện đang tải để tạo ra hành vi cuộn vô hạn.

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ả.