为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

潇潇雨雨 2019-10-06 13:06:34
我正在寻找正确的模式以每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,但是我无法弄清楚在此用例中如何使用它!我觉得这是我们在引导模板中经常使用的东西!?谢谢
查看完整描述

4 回答

?
神不在的星期二

TA贡献1963条经验 获得超6个赞

投票最多的答案虽然有效,但不是我认为是有角度的方法,也不是使用bootstrap自己的类来处理这种情况。正如@claies所提到的,.clearfix该类适用于此类情况。我认为,最干净的实现如下:


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

此结构避免了product数组的混乱索引,允许使用干净的点表示法,并且将clearfix类用于其预期目的。


查看完整回答
反对 回复 2019-10-06
?
慕尼黑的夜晚无繁华

TA贡献1864条经验 获得超6个赞

我知道有些晚了,但仍然可以帮助某人。我这样做是这样的:


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


查看完整回答
反对 回复 2019-10-06
?
侃侃无极

TA贡献2051条经验 获得超10个赞

好了,该解决方案远远比那些简单的已经在这里,并允许不同的设备宽度不同的列宽。


<div class="row">

    <div ng-repeat="image in images">

        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">

            ... your content here ...

        </div>

        <div class="clearfix visible-lg" ng-if="($index + 1) % 6 == 0"></div>

        <div class="clearfix visible-md" ng-if="($index + 1) % 4 == 0"></div>

        <div class="clearfix visible-sm" ng-if="($index + 1) % 3 == 0"></div>

        <div class="clearfix visible-xs" ng-if="($index + 1) % 2 == 0"></div>

    </div>

</div>

注意,该% 6部分应该等于结果列数。因此,如果在column元素上有类col-lg-2,则将有6列,请使用... % 6。


该技术(不包括ng-if)

查看完整回答
反对 回复 2019-10-06
?
MMMHUHU

TA贡献1834条经验 获得超8个赞

尽管您想要完成的工作可能有用,但还有另一种选择,我认为您可能会忽略它,它要简单得多。


没错,当列的高度不固定时,Bootstrap表的行为会很奇怪。但是,创建了一个引导类来解决此问题并执行响应式重置。


只需<div class="clearfix"></div>在每个新行的开头之前创建一个空白,以使浮点数重置,并使列返回其正确位置。


查看完整回答
反对 回复 2019-10-06
  • 4 回答
  • 0 关注
  • 741 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信