表格单元格上的ng-repeat而不是行

sora0419

有没有一种方法可以在单元格而不是行上使用ng-repeat?并且我知道我在标题中说了“表格”,但我想尽可能避免使用表格。

我有一个collectionitem,我想要显示的items一个又一个,他们的位置取决于每行允许的项目的数量。

例如,我有7个itemscollection

如果我每行指定3个项目,则结果应如下所示。

例子1

如果我每行指定4个项目,则结果应如下所示。

例子2

有没有办法使用它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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

表格单元格附加在表格行的外部而不是内部

表格行可以没有单元格吗?

将表格单元格强制到新行

VBA填充整个表格而不是定义的单元格

抓行,然后抓取表格中的单元格

返回整个单元格而不是行

在Google电子表格上基于1个单元格移动一行并确认第二个单元格不为空

如何在Google表格中将矩形的单元格转换为单元格的行/列?

在表格视图Swift中获取单元格的行

水平计算表格行单元格。怎么样?

单个表格单元格在另一行上具有全宽

在Google表格的单元格中检测行的开头

在悬停表格单元格上,根据悬停单元格的行高突出显示所有相应的单元格/行

将表格单元格分成五行

我想隐藏特定单元格的表格行

按行而不是按单元格填充Google电子表格

行引用而不是单元格引用

在表格单元格中使用ng-repeat

通过ID查找表格行并编辑其单元格?

将表格单元格的内容(而不是文本)移到右侧

如何为表格单元格边框的角指定上/下边框而不是左/右边框的颜色

Excel - 如何准确读取电子表格上显示的单元格值,而不是通过公式

如何在 ng-repeat 之后在每个表格行中添加一个手动单元格?

CEFSHARP - ChromiumWebBrowser 获取表格行单元格值

如何在表格的特定单元格而不是整个表格上应用onclick?

在表格的所有单元格中使用 flexbox 样式垂直堆叠行的单元格

使用JS更改表格中单元格的行颜色

向上或向下移动 HTML 表格单元格(不是行)

根据行名和单元格值突出显示对应的表格 <TD> 单元格