javascript - 每行两个div的AngularJS ng-repeat网格

Question

我想从数组中加载数据并每行显示两个 div。

例如:假设有 8 个对象。我希望它们出现在四行中，每行两行

1 2

3 4

5 6

7 8

代码:

<div ng-repeat="accObj in accountsArr" width="100%">
    <div class="col" width="100%">
    <div  ng-if="$even" style="width:50%;height:70px;background-color:red">
    {{accObj.account}}<br>
    {{accObj.type}}
    </div>
    <div  ng-if="$odd" style="width:50%;height:70px;background-color:yellow">
    {{accObj.account}}<br>
    {{accObj.type}}
    </div>

    </div>
    </div>

这就是我的代码目前的工作方式。 Plnkr

有人可以指导我如何获得所需的结果吗？

非常感谢任何帮助。

Answer 1

您必须应用简单的 CSS 才能使它们并排放置。有多种方法可以实现。其中之一是使用 <span>标签:

<span style="margin:4px">{{accObj.account}}</span>
<span style="margin:4px">{{accObj.type}}</span>

Example here.

使用您选择的 margin 。