我有一个现有的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个产品组中的项目.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。