- 首页
- 其他开发
- Angular ng-repeat 每 3 或 4 列添加引导行
Angular ng-repeat 每 3 或 4 列添加引导行
[英] Angular ng-repeat add bootstrap row every 3 or 4 cols
本文介绍了Angular ng-repeat 每 3 或 4 列添加引导行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在寻找正确的模式来每 3 列注入一个引导行类.我需要这个，因为 cols 没有固定的高度(我不想修复)，所以它破坏了我的设计！
这是我的代码:
<div ng-if="$index % 3 == 0" class="row"><div class="col-sm-4" >...
但它确实在每一行中只显示一个产品.我想要的最终结果是:
<div class="col-sm4">... </div><div class="col-sm4">... </div><div class="col-sm4">... </div>
<div class="row"><div class="col-sm4">... </div><div class="col-sm4">... </div><div class="col-sm4">... </div>
我可以仅使用 ng-repeat 模式(没有指令或控制器)来实现这一点吗?docs 介绍了 ng-repeat-start 和 ng-repeat-end 但我不知道如何使用它就是这个用例！我觉得这是我们在引导模板中经常使用的东西！?谢谢
解决方案
投票最高的答案虽然有效，但不是我认为的角度方式，也不是使用引导程序自己的类来处理这个情况.正如@claies 所提到的， .clearfix 类适用于此类情况.在我看来，最干净的实现如下:
<div ng-repeat="产品中的产品"><div class="clearfix" ng-if="$index % 3 == 0"></div><div class="col-sm-4"><h2>{{product.title}}</h2>
这种结构避免了产品数组的混乱索引，允许使用干净的点表示法，并利用 clearfix 类实现其预期目的.
I'm looking for the right pattern to inject a bootstrap row class every each 3 columns. I need this because cols doesn't have a fixed hight (and I don't want to fix one), so it breaks my design !
Here is my code :
<div ng-repeat="product in products">
<div ng-if="$index % 3 == 0" class="row">
<div class="col-sm-4" >
...
</div>
</div>
</div>
But it does only display one product in each row. What I want as final result is :
<div class="row">
<div class="col-sm4"> ... </div>
<div class="col-sm4"> ... </div>
<div class="col-sm4"> ... </div>
</div>
<div class="row">
<div class="col-sm4"> ... </div>
<div class="col-sm4"> ... </div>
<div class="col-sm4"> ... </div>
</div>
Can I achieve this with only ng-repeat pattern (without directive or controller) ? The docs introduce ng-repeat-start and ng-repeat-end but I can't figure out how to use it is this use case ! I feel like this is something we often use in bootstrap templating ! ? Thanks
解决方案
The top voted answer, while effective, is not what I would consider to be the angular way, nor is it using bootstrap's own classes that are meant to deal with this situation. As @claies mentioned, the .clearfix class is meant for situations such as these. In my opinion, the cleanest implementation is as follows:
<div class="row">
<div ng-repeat="product in products">
<div class="clearfix" ng-if="$index % 3 == 0"></div>
<div class="col-sm-4">
<h2>{{product.title}}</h2>
</div>
</div>
</div>
This structure avoids messy indexing of the products array, allows for clean dot notation, and makes use of the clearfix class for its intended purpose.
这篇关于Angular ng-repeat 每 3 或 4 列添加引导行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
