html – 更改ngRepeat的步长

概述我有一个现有的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 >       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" >    <div >    </div>  </div></div>

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

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

第一个ng-repeat遍历整个数组,但内部ng-if仅渲染每个第3个项目,ng-init创建一个由3个产品别名为子组的子数组.内部ng重复遍历3个产品组中的项目.

Demo

总结

以上是内存溢出为你收集整理的html – 更改ngRepeat的步长全部内容，希望文章能够帮你解决html – 更改ngRepeat的步长所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。