Angular ng-repeat每3或4个列添加引导行

Question

我正在寻找正确的模式以每3列注入一个引导行类。我需要这个是因为cols没有固定的高度（而且我不想固定一个），所以这破坏了我的设计！

这是我的代码：

<div ng-repeat="product in products">

    <div ng-if="$index % 3 == 0" class="row">

        <div class="col-sm-4" >

            ...

        </div>

    </div>

</div>

但它每行只显示一个产品。我想要的最终结果是：

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

我可以仅使用ng-repeat模式（没有指令或控制器）来实现吗？该文档介绍了ng-repeat-start和ng-repeat-end，但是我无法弄清楚在此用例中如何使用它！我觉得这是我们在引导模板中经常使用的东西！？谢谢

Answer 1

投票最多的答案虽然有效，但不是我认为是有角度的方法，也不是使用bootstrap自己的类来处理这种情况。正如@claies所提到的，.clearfix该类适用于此类情况。我认为，最干净的实现如下：<div class="row">&nbsp; &nbsp; <div ng-repeat="product in products">&nbsp; &nbsp; &nbsp; &nbsp; <div class="clearfix" ng-if="$index % 3 == 0"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-sm-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>{{product.title}}</h2>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>此结构避免了product数组的混乱索引，允许使用干净的点表示法，并且将clearfix类用于其预期目的。

Answer 2

我知道有些晚了，但仍然可以帮助某人。我这样做是这样的：<div ng-repeat="product in products" ng-if="$index % 3 == 0" class="row">&nbsp; &nbsp; <div class="col-xs-4">{{products[$index]}}</div>&nbsp; &nbsp; <div class="col-xs-4" ng-if="products.length > ($index + 1)">{{products[$index + 1]}}</div>&nbsp; &nbsp; <div class="col-xs-4" ng-if="products.length > ($index + 2)">{{products[$index + 2]}}</div></div>

Answer 3

好了，该解决方案远远比那些简单的已经在这里，并允许不同的设备宽度不同的列宽。<div class="row">&nbsp; &nbsp; <div ng-repeat="image in images">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ... your content here ...&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="clearfix visible-lg" ng-if="($index + 1) % 6 == 0"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="clearfix visible-md" ng-if="($index + 1) % 4 == 0"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="clearfix visible-sm" ng-if="($index + 1) % 3 == 0"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="clearfix visible-xs" ng-if="($index + 1) % 2 == 0"></div>&nbsp; &nbsp; </div></div>注意，该% 6部分应该等于结果列数。因此，如果在column元素上有类col-lg-2，则将有6列，请使用... % 6。该技术（不包括ng-if）

Answer 4

尽管您想要完成的工作可能有用，但还有另一种选择，我认为您可能会忽略它，它要简单得多。没错，当列的高度不固定时，Bootstrap表的行为会很奇怪。但是，创建了一个引导类来解决此问题并执行响应式重置。只需<div class="clearfix"></div>在每个新行的开头之前创建一个空白，以使浮点数重置，并使列返回其正确位置。