更改步长ngRepeat [英] Change step size for ngRepeat

问题描述

我有一个地方使用ngRepeat页面上的瓦片现有的HTML模板，

I have an existing HTML template that places tiles on the page using ngRepeat,

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

设计者现在需要每3瓷砖包装在一个额外股利。

The designer now needs to wrap every 3 tiles in an extra div.

通常情况下，我会通过列表，要么循环，

Normally, I would loop through the list and either,

• 3的瓷砖包裹在格在一个单一的步骤每个循环由3项
  迭代中，测试以查看是否存在第二和第三元素（时
  列表长度不是3的倍数）


• 或STEP通过列表中的一个
  在一个时间正常，并检查项目的索引。如果为3的模
  等于0，我会再添加额外的div标签

但我看不到我会怎么做无论是在角。任何建议，如何处理？

But I can't see how I would do either in Angular. Any suggestions as to how to handle this?

推荐答案

有好得多的黄金视图模型，使其适合您的观点 - 这就是所谓的的查看的 - 模型的一个原因。因此，修改后的产品可以是：

It is much better to "prime" the ViewModel so that it suits your View - it's called View-Model for a reason. So, your modified productList could be:

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

所以，遍历你要嵌套 NG-重复取值：

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

但是有可能（虽然效率不高）为的伪步的通过数组：

But it is possible (although, inefficient) to "pseudo-step" through the array:

<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-重复进入整个数组结束了，但里面的 NG-如果只呈现每3项目和 NG-INIT 创建了3个产品别名为组子数组。内 NG-重复越过3产品组中的项目。

The first ng-repeat goes over the entire array, but the inner ng-if only renders every 3rd item and ng-init creates a sub-array of 3 products aliased as group. The inner ng-repeat goes over the items in the group of 3 products.

演示

Demo

这篇关于更改步长ngRepeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！