如何使用单个ng-repeat实现指定每行元素数的排列（无需table）

当然可以！你完全能用单个ng-repeat实现这种按指定行数排列元素的效果，不用依赖<table>标签——咱们用CSS布局配合AngularJS的简单逻辑就能搞定，给你两种实用思路，优先推荐第一种，省心又高效：

方案1：CSS Flexbox布局（最推荐，零额外逻辑） #

这种方法根本不需要复杂的Angular逻辑，全靠CSS的Flex布局来控场。你只需要给装元素的容器设置Flex属性，指定每行要放几个元素，然后用单个ng-repeat把所有元素遍历出来就行，剩下的换行、对齐啥的浏览器都会帮你搞定。

示例代码 #

<!-- 容器：初始化元素集合和每行数量 -->
<div class="item-container" ng-init="items = [1,2,3,4,5,6,7]; itemsPerRow = 3">
  <!-- 单个ng-repeat遍历所有元素 -->
  <div class="item" ng-repeat="item in items">
    {{ item }}
  </div>
</div>

对应的CSS：

.item-container {
  display: flex;
  flex-wrap: wrap; /* 自动换行 */
  gap: 10px; /* 可选：元素之间的间距，按需调整 */
}

.item {
  /* 动态计算每个元素的宽度：100%除以每行数量，减去间距的影响 */
  width: calc(100% / {{ itemsPerRow }} - ({{ itemsPerRow }} - 1) * 10px / {{ itemsPerRow }});
  padding: 10px;
  background: #f0f0f0;
  box-sizing: border-box; /* 确保padding不会撑宽元素 */
}

你只需要修改itemsPerRow的值（比如改成4），7个元素就会自动变成4+3的排列，完全符合你的需求。如果不需要动态调整每行数量，直接把宽度写死（比如width: 33.33%对应每行3个）也可以。

方案2：利用$index控制换行（适合需手动干预的场景） #

如果需要在特定位置强制换行，或者给每行加特殊样式，那可以利用ng-repeat自带的$index变量来判断。每遍历到第N个元素（除了最后一个），就插入一个换行元素，这样也能实现按指定数量换行的效果，而且还是只用一个ng-repeat。

示例代码 #

<div class="container" ng-init="items = [1,2,3,4,5,6,7]; itemsPerRow = 3">
  <div class="item" ng-repeat="item in items">
    {{ item }}
    <!-- 每N个元素后插入换行（最后一个元素跳过） -->
    <div class="line-break" ng-if="($index + 1) % itemsPerRow === 0 && $index !== items.length - 1"></div>
  </div>
</div>

对应的CSS：

.container {
  width: 100%;
}

.item {
  display: inline-block;
  width: calc(100% / 3);
  padding: 10px;
  box-sizing: border-box;
  background: #f0f0f0;
}

.line-break {
  display: block;
  width: 100%;
}

关键提醒 #

• 两种方案都只用了一个ng-repeat，完全不需要嵌套循环或者<table>标签。
• Flexbox方案还支持响应式布局，配合媒体查询就能轻松适配不同屏幕尺寸。
• 以上代码兼容AngularJS 1.x及以上版本，直接就能用。

内容的提问来源于stack exchange，提问作者sora0419