我有一个现有的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个产品组中的项目.
