更改ngRepeat的步长

Question

我有一个现有的HTML模板,使用ngRepeat在页面上放置切片,

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

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

通常,我会循环遍历列表,或者,

• 每个循环由3个项目组成,在单个迭代中包含div中的3个tile,测试是否存在第2个和第3个元素(当列表长度不是3的倍数时)
• 或者像往常一样逐步浏览列表并检查项目的索引.如果3的mod等于0,我会添加额外的div标签

但我无法看到我在Angular中的表现.有关如何处理这个的任何建议？

Answer 1

最好"填充"ViewModel以便它适合您的View - 它被称为View -Model是有原因的.所以,您的修改productList可能是:

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

所以,迭代你会嵌套ng-repeat:

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

第一个ng-repeat遍历整个数组,但内部ng-if只渲染每个第3个项目并ng-init创建一个由3个产品别名的子数组group.内心ng-repeat遍布group3种产品中的物品.

演示