HTML动态创建行及Flipkart API产品每行4个展示问题求助

我来帮你解决这两个问题哈！

根据你使用的技术栈，有几种常用的实现方式：

• 原生JavaScript场景：
  可以通过document.createElement()方法创建行元素（比如<div class="row">），然后将其添加到目标容器中。示例代码：

  // 获取容器元素
  const container = document.querySelector('.container-fluid');
  // 创建新行
  const newRow = document.createElement('div');
  newRow.classList.add('row');
  // 可以往行里添加内容，比如产品列
  const column = document.createElement('div');
  column.classList.add('column');
  column.textContent = '新的产品列';
  newRow.appendChild(column);
  // 将新行插入容器
  container.appendChild(newRow);
  

• Angular场景（和你的第二个问题匹配）：
  更推荐结合数据循环来动态生成行，比如通过分组数据或者利用$index判断来拆分行，具体可以参考第二个问题的解决方案，本质就是根据数据量自动渲染对应的<div class="row">元素。

看你用了Angular的ng-repeat，下面给你两种实用的解决思路：

方法一：利用Angular的$index和切片直接渲染 #

不用提前修改数据，直接在模板里通过$index判断，每4个产品就新建一行：

<div class="container-fluid">
  <!-- 每4个产品生成一个row -->
  <div class="row" ng-repeat="(idx, item) in flipkart track by idx" ng-if="idx % 4 === 0">
    <!-- 截取当前行的4个产品 -->
    <div class="column" ng-repeat="product in flipkart.slice(idx, idx + 4)">
      <div class="cards card1">
        <a href="" ng-click="userSearchDetails(product)">
          <!-- 这里放你的产品内容，比如图片、名称、价格等 -->
          <img ng-src="{{product.imageUrl}}" alt="{{product.name}}">
          <p>{{product.name}}</p>
          <span>{{product.price}}</span>
        </a>
      </div>
    </div>
  </div>
</div>

方法二：先在控制器中分组数据（更清晰易维护） #

先把产品数组拆分成每组4个的二维数组，再循环渲染：

// 你的Angular控制器代码
$scope.flipkart = []; // 这里是你从Flipkart API获取的产品列表

// 分组函数：把数组分成每组size个元素
function groupArray(arr, size) {
  const groups = [];
  for (let i = 0; i < arr.length; i += size) {
    groups.push(arr.slice(i, i + size));
  }
  return groups;
}

// 生成每组4个产品的数组
$scope.productGroups = groupArray($scope.flipkart, 4);

然后在模板里循环分组后的数组：

<div class="container-fluid">
  <div class="row" ng-repeat="group in productGroups">
    <div class="column" ng-repeat="data in group">
      <div class="cards card1">
        <a href="" ng-click="userSearchDetails(data)">
          <!-- 产品内容 -->
        </a>
      </div>
    </div>
  </div>
</div>

额外小提示：如果用了Bootstrap栅格 #

如果你的column类是基于Bootstrap的，直接给column添加col-md-3类（因为Bootstrap一行是12格，12/4=3），不用手动拆分row，Bootstrap会自动帮你换行：

<div class="container-fluid">
  <div class="row">
    <div class="column col-md-3" ng-repeat="data in flipkart">
      <div class="cards card1">
        <a href="" ng-click="userSearchDetails(data)">
          <!-- 产品内容 -->
        </a>
      </div>
    </div>
  </div>
</div>

这种方式最简单，适合用了Bootstrap的项目。

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