有没有一种方法可以在单元格而不是行上使用ng-repeat?并且我知道我在标题中说了“表格”,但我想尽可能避免使用表格。
我有一个collection
的item
,我想要显示的items
一个又一个,他们的位置取决于每行允许的项目的数量。
例如,我有7个items
在collection
。
如果我每行指定3个项目,则结果应如下所示。
如果我每行指定4个项目,则结果应如下所示。
有没有办法使用它ng-repeat
来实现这一目标?我期望结果是这样的:
<div> <!--ng-repeat here-->
<span>item1</span>
<span>item2</span>
<span>item3</span>
<br>
<span>item4</span>
<span>item5</span>
<span>item6</span>
<br>
<span>item7</span>
<span>item8</span>
</div>
还是我被迫嵌套我们ng-repeat
?
首先,您可以尝试一些简单的操作,例如:
<div ng-repeat="i in items">
<div style="width: 33%; height: 100px; float: left">{{i}}</div>
</div>
其次,您可以将控制器中的项目手动分组为2维数组:
<div ng-repeat="iRow in groupedItems">
<div ng-repeat="i in iRow">
<div style="width: 100px; height: 100px; float: left">{{i}}</div>
</div>
</div>
第三,您可以编写指令为您分组项目,如下所示:
<div group-items="items" group-items-per-row="4" group-items-result="groupedItems" group-items-regroup="yourTrigger">
<div ng-repeat="iRow in groupedItems">
<div ng-repeat="i in iRow">
<div style="width: 100px; height: 100px; float: left">{{i}}</div>
</div>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句