Angular-material-virtualrepeat
角材-バーチャルリピート
*md-virtual-repeat-container* は、md-virtual-repeatコンポーネントのスクロールコンテナーです。属性
次の表に、 md-virtual-repeat-container のさまざまな属性のパラメーターと説明を示します。
| Sr.No | Parameter & Description |
|---|---|
| 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要素のみをレンダリングします。
属性
次の表に、 md-virtual-repeat のさまざまな属性のパラメーターと説明を示します。
| Sr.No | Parameter & Description |
|---|---|
| 1 |
md-item-size 繰り返される要素の高さまたは幅（各要素で同一でなければなりません）。 これはオプションです。 これは、欠落している場合はdomからサイズを読み取ろうとしますが、繰り返されるすべてのノードの高さまたは幅が同じであると想定しています。 |
| 2 |
md-extra-name 繰り返しスコープで現在の反復アイテムを割り当てることができる追加の名前を評価します（md-autocompleteで使用するために必要）。 |
| 3 |
md-on-demand 存在する場合、 md-virtual-repeat 引数を、配列ではなく行をフェッチできるオブジェクトとして扱います。このオブジェクトは、2つのメソッドを持つ次のインターフェースを実装する必要があります-
|
例
次の例は、仮想リピートの使用を示しています。
*_am_virtualrepeat_*<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>結果
結果を確認します。
