Question

我在tables变量中有一堆数据，我想要制作很多网格视图，但是我不能为每个2网格创建新行。

这是我的代码：

<ion-content class="has-header">
    <div class="row">
      <div class="col col-40" ng-repeat="table in tables" style="background:{{table.warna}}">{{table.fstRoomName}}<br/>{{table.fsiStatus}}</div>
    </div>
</ion-content>

Answer 1

经过一番澄清，这是另一个答案。每两个项目后使用CSS应用一些保证金。

<div class="padded col col-40" ng-repeat="table in tables" style="background:{{table.warna}}">{{table.fstRoomName}}<br/>{{table.fsiStatus}}</div>

CSS：

.padded:nth-child(odd) {
    margin-bottom: 10px;
}

Answer 2

您可以将行包装在另一个div中，并使用$odd中的ng-repeat变量有条件地添加另一行。

<div ng-repeat="table in tables">
    <div class="col col-40" style="background:{{table.warna}}">{table.fstRoomName}}<br/>{{table.fsiStatus}}</div>
    <div ng-if="$odd">
        This will be visible every second item.
    </div>
</div>

使用ng-repeat自动添加新行

2 个答案: