html – 更改ngRepeat的步长

发布时间：2020-12-14 21:13:00 所属栏目：资源来源：网络整理

导读：我有一个现有的HTML模板,使用ngRepeat在页面上放置切片, div ng-repeat="product in productList" div class="product-tile" Product content goes here... /div/div 设计师现在需要将每3个瓷砖包裹在额外的div中. 通常,我会循环遍历列表,或者, 将每个循环分

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

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

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

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

>将每个循环分为3个项目,将3个瓷砖包裹在div中
迭代,测试是否存在第二和第三个元素(对于何时
列表长度不是3的倍数
>或者逐步完成清单
正常时,检查项目的索引.如果一个mod为3
等于0,然后我会添加额外的div标签

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

解决方法

最好“填充”ViewModel以便它适合您的View – 它有一个叫做View-Model的原因.因此,您修改的productList可能是：

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

但是有可能(尽管效率低下)通过数组“伪步”：

<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个产品别名为子组的子数组.内部ng重复遍历3个产品组中的项目.

Demo

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!