微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

angularjs – 角度ng重复添加引导行每3或4 cols

我正在寻找正确的模式注入引导行类每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重复模式(无指令或控制器)实现这一点吗? docs引入ng-repeat-start和ng-repeat-end但是我不知道如何使用它是这个用例!我觉得这是我们经常在bootstrap模板中使用的东西! ?谢谢

我知道这有点晚了,但它仍然可能帮助某人。我做到了这样:
<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

原文地址:https://www.jb51.cc/angularjs/147073.html

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

相关推荐