Угловой материал - виртуальный повтор
В md-virtual-repeat-container - это контейнер прокрутки для компонента md-virtual-repeat.
Атрибуты
В следующей таблице перечислены параметры и описание различных атрибутов 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). |
md-виртуальный-повтор
Виртуальный повтор является заменой ng-repeat для визуализации достаточного количества html-элементов для заполнения контейнера и их повторного использования при прокрутке пользователем.
Атрибуты
В следующей таблице перечислены параметры и описание различных атрибутов md-virtual-repeat.
| Старший Нет | Параметр и описание |
|---|---|
| 1 | md-item-size Высота или ширина повторяющихся элементов (которые должны быть идентичны для каждого элемента). Это необязательно. Это пытается прочитать размер из dom, если он отсутствует, но все же предполагает, что все повторяющиеся узлы имеют одинаковую высоту или ширину. |
| 2 | md-extra-name Оценивает дополнительное имя, которому может быть назначен текущий повторяемый элемент в повторяющейся области (необходимо для использования в md-autocomplete). |
| 3 | md-on-demand Когда присутствует, лечит 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>Результат
Проверьте результат.