[英]Open and close a div after every “x” element
假設我的數組中有8個項目。 在遍歷此數組時,我想將它們分成3個項目/頁,這將給我3個頁面。
邏輯很明確,但我不知道如何使用ng-repeat
實現這一目標。 如果沒有直接方法,我也會接受間接方法。
本質上,我想做這樣的事情:
$scope.items = ["A", "B", "C", "D", "E", "F", "G", "H"];
$scope.pages = Math.ceil($scope.items.length/3);
<div class="box">
<div class="items" ng-repeat="page in pages">
<!-- put 3 items here and then create a new ".items" div with the next 3 items and so on -->
</div>
</div>
<div class="box">
<div class="items">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
<div class="items">
<p>D</p>
<p>E</p>
<p>F</p>
</div>
<div class="items">
<p>G</p>
<p>H</p>
</div>
</div>
實現目標的想法是通過使用數組的拼接功能將主數組拆分為最小的數組: https : //www.w3schools.com/jsref/jsref_splice.asp
您的拆分功能可能如下所示:
var _split = function(res,arr, n) {
while (arr.length) {
res.push(arr.splice(0, n));
}
}
我創建了一個jsfindle來說明您的要求: http : //jsfiddle.net/ADukg/11761/
嘗試以下操作:在角度控制器中:
$scope.items = ["A", "B", "C", "D", "E", "F", "G", "H"];
$scope.pages = Math.ceil($scope.items.length/3);
$scope.itemsArray=[];
while($scope.items.length>0){
$scope.itemsArray.push($scope.items.splice(0,$scope.pages));
}
在html中:
<div ng-repeat="o in itemsArray">
<p ng-repeat="it in o"> {{it}} </p>
</div>`
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.