jquery - 在同一数组级别嵌套 ng-repeat

Question

如何在每 3 次重复后添加一个“div”？

这是我的数组：

[
   client : "name",
   client : "name",
   client : "name",
   client : "name",
   client : "name",
   client : "name",
   client : "name",
   client : "name",
   client : "name",

]

预期的结果是：

<div>name</div>
<div>name</div>
<div>name</div>
<div class="clear"></div>
<div>name</div>
<div>name</div>
<div>name</div>
<div class="clear"></div>
<div>name</div>
<div>name</div>
<div>name</div>
<div class="clear"></div>

Answer 1

为什么不拆分您的初始数组？

[
    [
        client : "name",
        client : "name",
        client : "name"
    ],
    [
        client : "name",
        client : "name",
        client : "name"
    ],
    [
        client : "name",
        client : "name",
        client : "name"
    ]
]

Answer 2

创建一个过滤器，将您的数组分成三个一组并嵌套这些组。

过滤器应该是这样的：

app.filter('split', function() {
  return function(target) {
    var splitted = [];

    if (!target) {
      return target;
    }

    for(var i = 0; i < target.length; i += 3) {
      splitted.push(target.slice(i, i+3));
    }

    return splitted;
 }
});

在您的控制器中，只需初始化：

$scope.original = [1, 2, 3, 4, 5, 6, 7, 8, 9];

最后，您的 HTML 应该是这样的：

<div ng-repeat="group in original | split">
  <div ng-repeat="item in group">{{item}}</div>
  <div class="clear"></div>
</div>

您可以参数化组长度。这可以通过向过滤器添加第二个参数并传递来实现ng-repeat="group in original | split:3"。

并不是说原始数组没有被修改。这是一个工作 Plunker。

Answer 3

对此的一种解决方案是$index在循环内使用角度变量，就像在这个 plunker 中一样。http://plnkr.co/edit/ycnPtBLmbtV8hwIFTsGd?p=preview

此外，您发布的数据不是有效的数组或有效的 json。我假设您必须处理 json。如果你的意思是一个数组，同样的$index方法也可以用于数组。

Answer 4

你可以循环遍历数组，检查迭代是否可以被三整除并插入额外的 div 吗？