Question

我有一个简单的ng-repeat生成图像div。我希望它们以4行而不是一个长垂直列表的形式出现。我怎样才能做到这一点？

<div ng-repeat="artist in artists">
    <div>
        <h3> {({ artist.fields.title })} </h3>
        <img src="{({ artist.fields.link })}" />
    </div>
</div>

Answer 1

我相信你想做这样的事情

<div style="width:800px;">    
    <div ng-repeat="artist in artists" style="width:200px;float:left;">
        <div>
            <h3> {({ artist.fields.title })} </h3>
            <img src="{({ artist.fields.link })}" />
        </div>
    </div>    
</div>

通过拥有一个宽度固定的容器，并且每个元素的宽度为宽度的1/4，就可以达到你想要的效果。

当然，内联样式不应该用在实际代码中：）

Answer 2

您可以使用$index property每隔4个项目添加一个标记。然后使用一些CSS根据需要显示项目：

<div ng-repeat="artist in artists">
    <div class="someClass">
        <h3> {({ artist.fields.title })} </h3>
        <img src="{({ artist.fields.link })}" />
    </div>
    <br ng-if="artist.$index % 4 == 0" />
</div>

Answer 3

一种方法是使用css属性。使用float：left属性将一个类附加到div，并在每个第4个div之后插入一个br标记

Answer 4

我猜你在使用bootstrap？如果是，该主题可以提供帮助：

Bootstrap's grid columns number per row

doc for bootstrap网格布局：

http://getbootstrap.com/css/#grid-example-mixed

如何使用角度ng-repeat生成4行？

4 个答案: