Question

我使用Bootstrap并希望创建内容行，每行包含三列，其中每列的内容代表ng-repeat中的一个对象。

看起来像这样：

<div class="row">
       <div class="col-md-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel title</h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel title</h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel title</h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel title</h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel title</h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel title</h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
        </div>
    </div>

最好的方法是什么？我基本上需要添加一些

的内容

</div>
<div class="row">

在ng-repeat中的每三个对象之间。

Answer 1

我猜你想在每一行显示3个面板。

如果您在面板上使用col-md-4，那么bootstrap将在每行中放置3个面板（只要屏幕尺寸至少为MD尺寸） - 所以，每隔三个添加row行不仅是不必要的，甚至可能会阻止某些功能主义者（比如只为SM设备显示2个）。

关于angular，您可以使用$index访问循环内的索引。

Answer 2

我做了一项研究，似乎你无法包装ng-repeat的元素。

你最好的选择是使用二维数组。保留rows数组，其中每个item代表array of objects。所以你必须编写两个嵌套的ng-repeat，如下所示：

<div class="row" ng-repeat="row in rows">
    <div class="col-md-4" ng-repeat="object in row">
        ...
    </div>
</div>

以下是the working example的HTML结构，但随机数据。

此外，此方法允许您在代码中动态更改每行中的对象数。

使用ng-repeat有条件地添加额外元素

2 个答案: