Html 更改ngRepeat的步长

我有一个现有的HTML模板，使用ngRepeat在页面上放置平铺

<div ng-repeat="product in productList">
    <div class="product-tile">
       Product content goes here...
    </div>
</div>

产品内容在这里。。。

设计师现在需要将每3块瓷砖包裹在一个额外的div中

通常，我会循环浏览列表

• 在每个循环中加入3个项目，其中3个瓷砖包裹在一个分区中 迭代，测试第二和第三个元素是否存在（何时 列表长度不是3的倍数）
• 或者一步一步地浏览列表 在正常情况下，检查项目的索引。如果mod为3 如果等于0，我将添加额外的div标记

---

但我看不出在这两种情况下我会怎么做。关于如何处理这个问题，有什么建议吗？

我能想到的唯一一件事是，当您将原始的

productList

数组放入一个数组中时，对其进行一次分区，然后使用嵌套的

ng repeat

s来获得所需的结构

以下说明了这一方法：

angular.module（'stackoverflow'，[]）.controller（'ProductListsCtrl'，function（$scope）{
$scope.productList=分区（[1,2,3,4,5,6,7,8]，3）；
});
/*你可以把它放在实用程序库或其他什么地方*/
功能分区（coll，大小）{
var组=[]；
for（var groupIndex=0，numGroups=Math.ceil（coll.length/size）；
groupIndex

。产品磁贴{
显示：内联块；
背景色：#9A9EDA；
高度：100px；
宽度：100px；
线高：100px；
垂直对齐：中间对齐；
文本对齐：居中；
右边距：10px；
}
.包装纸{
保证金：5px；
填充：10px；
背景色：#634AFF；
}

{{product}}

最好为ViewModel设置“prime”以便它适合您的视图-它被称为视图-模型是有原因的。因此，您修改的

产品列表可以是：

$scope.productList = 
  [
    [ {/* product */ }, { }, { } ],
    [ { }, { }, { } ],
    // etc...
  ];

因此，要进行迭代，您需要嵌套
ng repeat
s：

<div ng-repeat="row in productList">
  <div ng-repeat="product in row" class="product-row-group">
    <div class="product-tile">
    </div>
  </div>
</div>



但是可以（尽管效率很低）通过阵列进行“伪步进”：

<div ng-repeat="product in productList">
  <div ng-if="$index % 3 === 0" 
       ng-init="group = productList.slice($index, $index + 3)">
    <div class="products-row">
      <div class="product-tile" ng-repeat="grItem in group">
        {{grItem}}
      </div>
    </div>
  </div>
</div>


{{grItem}}

第一个
ng repeat
覆盖整个数组，但是内部
ng if
只渲染第三个项目，并且
ng init
创建了一个子数组，其中包含3个别名为
组的产品。内部
ng repeat
检查3种产品的
组中的项目

虽然这是一个与另一个（）类似的答案，但它更清晰，并且它还显示了一种可以通过现有模型实现的方法。非常有帮助！