在每个＆＃34; x＆＃34;之后打开和关闭一个div。元件

Question

我们说我的阵列中有8个项目。循环遍历此数组时，我想将它们分成3个项目/页面，这将给我3页。

逻辑清晰，但我不知道如何使用ng-repeat实现这一目标。如果没有直接的方式，我也会采取间接的方式。

从本质上讲，我想做这样的事情：

JS

$scope.items = ["A", "B", "C", "D", "E", "F", "G", "H"];
$scope.pages = Math.ceil($scope.items.length/3);

HTML

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

Answer 1

实现目标的想法是通过使用数组的拼接功能将主数组拆分为最小数组：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/

Answer 2

试试这个：    在角度控制器中：

$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>`