角NG重复添加一行引导每3或4 COLS [英] Angular ng-repeat add bootstrap row every 3 or 4 cols

问题描述

我在寻找合适的模式来注入引导一行每类各3列。我需要这个，因为COLS没有一个固定的HIGHT（我不想为了修复一个），所以它打破了我的设计！

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 !

下面是我的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>

我可以只NG-重复模式（没有指令或控制器）实现这一目标？该文档介绍纳克重复启动和NG-重复的高端，但我无法弄清楚如何使用它是这个用例！我觉得这是我们经常在引导模板使用！ ？谢谢

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

推荐答案

我知道这是一个有点晚，但它仍然可能帮助别人。我做这样的：

I know it's a bit late but it still might help someone. I did it like this:

<div ng-repeat="product in products" ng-if="$index % 3 == 0" class="row">
    <div class="col-xs-4">{{products[$index]}}</div>
    <div class="col-xs-4" ng-if="products.length > ($index + 1)">{{products[$index + 1]}}</div>
    <div class="col-xs-4" ng-if="products.length > ($index + 2)">{{products[$index + 2]}}</div>
</div>

的jsfiddle

这篇关于角NG重复添加一行引导每3或4 COLS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！