javascript - AngularJS:将父级 <div> 每 n 个元素分开

Question

我有一个像这样的javascript数组，并尝试生成嵌套<div>使用 AngularJS。

var arr = ["abc", "def", "ghi", "jkl", "mno", "pqr", "stu"];

我想像这样每3个元素进行划分。

<div class="parent">
  <div class="child">abc</div>
  <div class="child">def</div>
  <div class="child">ghi</div>
</div>
<div class="parent">
  <div class="child">jkl</div>
  <div class="child">mno</div>
  <div class="child">pqr</div>
</div>
<div class="parent">
  <div class="child">stu</div>
</div>

我可以这样做吗？

Answer 1

一种方法是基于 itemsArray.length/maxItems 创建一个虚拟数组，并将该虚拟数组用于外部 ng-repeat...然后使用 limitTo 过滤项目。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.maxItems = 3;
  $scope.items = ["abc", "def", "ghi", "jkl", "mno", "pqr", "stu"];
  $scope.parentArr = new Array(Math.ceil($scope.items.length/$scope.maxItems));    
  
});

.parent{border: 1px solid #ccc; padding:10px}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
  <div class="parent" ng-repeat="par in parentArr track by $index">
    <div ng-repeat="item in items |limitTo: maxItems : $index*maxItems">{{item}}</div>
  </div>
</div>