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

Posted 2023-03-06

【中文标题】每行两个 div 的 AngularJS ng-repeat 网格

【英文标题】：AngularJS ng-repeat grid of two divs per row

【发布时间】：2015-08-14 11:53:26

【问题描述】：

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

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

1 2

3 4

5 6

7 8

代码：

<div ng-repeat="accObj in accountsArr" >
    <div class="col" >
    <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

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

非常感谢任何帮助。

【问题讨论】：

***.com/questions/18564888/…

【参考方案1】：

这是 CSS 问题 - 只需将两个 div 的 float:left; 添加到 style 即可。

【参考方案2】：

你必须应用简单的 CSS 来保持它们并排。有多种方法可以实现它。 其中之一是使用<span>标签：

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

Example here.

使用您选择的边距。