Angular列表每两项自动换行实现：API数据渲染布局问题

嘿，我来帮你搞定这个需求！首先得揪出你代码里的小语法错误——Angular的ng-repeat指令正确写法是item in collection，不是on，这个得先修正哈～

接下来分两步解决：先从API获取数据，再实现每两个列表项自动换行的布局。

第一步：在控制器中获取API数据 #

先在Angular控制器里用$http请求你的API，把数据绑定到作用域上：

angular.module('myApp', [])
.controller('ListController', function($http) {
  const vm = this;
  
  // 替换成你的API地址
  $http.get('https://your-api-endpoint.com/data')
    .then(res => {
      vm.lists = res.data; // 假设API返回的是包含列表项的数组
    })
    .catch(err => {
      console.error('加载数据失败:', err);
    });
});

第二步：实现每两项换行的布局 #

这里推荐两种方案，第一种用CSS Flexbox（最简洁现代），第二种用Angular的$index判断（适合老项目兼容）：

方案1：CSS Flexbox 实现（推荐）

这种方式完全靠CSS布局实现，不用依赖Angular的索引，代码更干净：

HTML代码：

<div ng-app="myApp" ng-controller="ListController as vm">
  <ul class="item-container">
    <!-- 遍历API返回的每一项，替换item.name为你的数据字段 -->
    <li ng-repeat="item in vm.lists" class="item-box">
      {{ item.name }}
    </li>
  </ul>
</div>

CSS代码：

/* 清除列表默认样式 */
.item-container {
  list-style: none;
  padding: 0;
  margin: 0;
  /* 开启flex布局，自动换行 */
  display: flex;
  flex-wrap: wrap;
  /* 可选：给盒子之间加间距 */
  gap: 10px;
}

.item-box {
  height: 100px;
  /* 宽度设为50%减去gap的一半，保证每行刚好两个 */
  width: calc(50% - 5px);
  border: 1px solid red;
  /* 让边框包含在宽度内，避免超出容器 */
  box-sizing: border-box;
  /* 可选：让内容居中显示 */
  display: flex;
  align-items: center;
  justify-content: center;
}

方案2：用Angular $index 强制换行

如果你的项目需要兼容非常老的浏览器（不支持flex），可以用Angular的$index判断每两个元素后插入换行：

HTML代码：

<div ng-app="myApp" ng-controller="ListController as vm">
  <ul class="item-container">
    <li ng-repeat="item in vm.lists" class="item-box">
      {{ item.name }}
    </li>
    <!-- 每两个元素后插入换行元素 -->
    <li 
      ng-if="(vm.lists.length > $index + 1) && ($index + 1) % 2 === 0" 
      class="line-break"
    ></li>
  </ul>
</div>

CSS代码：

.item-container {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden; /* 清除浮动 */
}

.item-box {
  height: 100px;
  width: 100px;
  border: 1px solid red;
  float: left;
  margin: 0 10px 10px 0; /* 给盒子加间距 */
}

.line-break {
  width: 100%;
  height: 0;
  float: left;
  clear: both; /* 强制换行 */
}

两种方案都能实现你要的效果，优先推荐方案1，因为Flexbox布局更灵活，代码也更易维护～

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