如何用AngularJS的ng-repeat实现多组div的酒店信息布局？

当然可以用ng-repeat实现你想要的分组布局！作为新手，你不用手动拆分数据，借助AngularJS内置的工具就能轻松搞定。下面给你两种实用的方案：

方案1：模板内直接处理（无需修改控制器） #

这种方法利用$index变量和数组的slice方法，在模板里直接实现每3个酒店包裹到.options容器中：

<!-- 外层每3个酒店创建一个.options容器 -->
<div class="options" ng-repeat="hotel in hotels" ng-if="$index % 3 === 0">
  <!-- 内层截取当前组的3个酒店数据 -->
  <div class="hotel-item" ng-repeat="item in hotels.slice($index, $index + 3)">
    <!-- 这里放置你的酒店图片和信息 -->
    <img ng-src="{{item.imageUrl}}" alt="{{item.hotelName}}">
    <h4>{{item.hotelName}}</h4>
    <p>{{item.price}} / 晚</p>
  </div>
</div>

原理说明： #

• $index % 3 === 0：当循环索引是3的倍数时（0、3、6...），创建一个新的.options容器
• hotels.slice($index, $index + 3)：从当前索引开始，截取最多3个酒店数据，自动处理总数不是3的倍数的情况（最后一组会包含剩余的1-2个）

方案2：控制器预处理分组（模板更简洁） #

如果希望模板逻辑更清晰，可以先在控制器里把酒店数组分成每3个一组的子数组，再用嵌套ng-repeat渲染：

控制器代码： #

angular.module('yourHotelApp').controller('HotelListController', function($scope) {
  // 假设这是你的原始酒店数据
  $scope.hotels = [
    { imageUrl: 'hotel1.jpg', hotelName: '海景酒店', price: '¥299' },
    { imageUrl: 'hotel2.jpg', hotelName: '城市快捷', price: '¥199' },
    // ...更多酒店数据
  ];

  // 定义分组函数，将数组按指定大小拆分
  function groupArray(arr, groupSize) {
    const grouped = [];
    for (let i = 0; i < arr.length; i += groupSize) {
      grouped.push(arr.slice(i, i + groupSize));
    }
    return grouped;
  }

  // 生成每3个一组的酒店数组
  $scope.groupedHotels = groupArray($scope.hotels, 3);
});

模板代码： #

<!-- 遍历分组后的数组 -->
<div class="options" ng-repeat="hotelGroup in groupedHotels">
  <!-- 遍历当前组内的酒店 -->
  <div class="hotel-item" ng-repeat="hotel in hotelGroup">
    <img ng-src="{{hotel.imageUrl}}" alt="{{hotel.hotelName}}">
    <h4>{{hotel.hotelName}}</h4>
    <p>{{hotel.price}} / 晚</p>
  </div>
</div>

优势： #

• 模板逻辑更直观，不用在模板里写复杂的索引判断
• 如果酒店数据是动态加载的（比如从API获取），只需要在数据更新后重新调用groupArray函数即可

两种方案都能完美实现你要的拼贴布局，根据自己的习惯选择就好啦！

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