如何在ng-repeat卡片布局中设间距并分页首行后插入广告图

没问题，我来帮你搞定这个需求！结合你已经实现的响应式卡片布局（笔记本4张/行、平板2张/行、移动端1张/行），我们可以通过拆分分页后的卡片列表+响应式变量判断的方式，在每一页的第一行卡片之后插入广告图片。

核心思路 #

1. 先通过监听窗口尺寸，动态设置当前设备下的cardsPerRow（每行卡片数），匹配你的响应式规则；
2. 将分页后的卡片数据拆分为「第一行卡片」和「剩余卡片」两部分，在中间插入广告；
3. 用CSS Grid保证广告占满整行，和卡片布局完美适配。

第一步：控制器逻辑（处理响应式和分页） #

angular.module('yourAppName', [])
.controller('CardLayoutCtrl', function($scope, $window) {
  // 模拟你的卡片数据（替换成实际数据）
  $scope.allCards = Array.from({length: 20}, (_, i) => ({id: i+1, title: `卡片${i+1}`}));
  
  // 分页相关变量
  $scope.currentPage = 1;
  $scope.itemsPerPage = 8; // 每页显示的总卡片数，可按需调整

  // 动态设置每行卡片数
  function updateCardsPerRow() {
    const screenWidth = $window.innerWidth;
    if (screenWidth >= 1200) {
      $scope.cardsPerRow = 4; // 笔记本端
    } else if (screenWidth >= 768) {
      $scope.cardsPerRow = 2; // 平板端
    } else {
      $scope.cardsPerRow = 1; // 移动端
    }
    $scope.$apply(); // 触发Angular视图更新
  }

  // 初始化+监听窗口 resize
  updateCardsPerRow();
  angular.element($window).on('resize', updateCardsPerRow);

  // 页面销毁时清理监听，避免内存泄漏
  $scope.$on('$destroy', () => {
    angular.element($window).off('resize', updateCardsPerRow);
  });

  // 获取当前页的卡片数据
  $scope.getPaginatedCards = function() {
    const startIdx = ($scope.currentPage - 1) * $scope.itemsPerPage;
    return $scope.allCards.slice(startIdx, startIdx + $scope.itemsPerPage);
  };
});

第二步：HTML模板（布局卡片和广告） #

<div ng-controller="CardLayoutCtrl" class="card-container">
  <!-- 卡片与广告布局 -->
  <div class="card-grid">
    <!-- 第一行卡片 -->
    <div 
      ng-repeat="card in getPaginatedCards().slice(0, cardsPerRow)" 
      class="card"
    >
      <h3>{{card.title}}</h3>
      <!-- 卡片其他内容 -->
    </div>

    <!-- 广告：仅当当前页卡片数 >= 一行数量时显示 -->
    <div ng-if="getPaginatedCards().length >= cardsPerRow" class="ad-banner">
      <img src="你的广告图片路径" alt="广告横幅">
    </div>

    <!-- 剩余卡片 -->
    <div 
      ng-repeat="card in getPaginatedCards().slice(cardsPerRow)" 
      class="card"
    >
      <h3>{{card.title}}</h3>
      <!-- 卡片其他内容 -->
    </div>
  </div>

  <!-- 分页控件 -->
  <div class="pagination">
    <button 
      ng-click="currentPage = currentPage - 1" 
      ng-disabled="currentPage === 1"
    >
      上一页
    </button>
    <span>第 {{currentPage}} 页</span>
    <button 
      ng-click="currentPage = currentPage + 1" 
      ng-disabled="currentPage * itemsPerPage >= allCards.length"
    >
      下一页
    </button>
  </div>
</div>

第三步：CSS样式（保证响应式布局） #

.card-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.card-grid {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.card {
  padding: 1.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.ad-banner {
  grid-column: 1 / -1; /* 广告占满整行 */
}

.ad-banner img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 响应式断点匹配你的需求 */
@media (min-width: 1200px) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

.pagination {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.pagination button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.pagination button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

关键细节说明 #

• 响应式适配：通过updateCardsPerRow函数监听窗口大小，动态调整每行卡片数，保证广告始终出现在第一行之后；
• 广告显示条件：用ng-if="getPaginatedCards().length >= cardsPerRow"判断，避免当前页卡片不足一行时显示广告；
• Grid布局：广告的grid-column: 1 / -1确保它占满整行，和卡片布局风格统一。

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