如何在AngularJS轮播中用ng-repeat实现多元素分组切换？

Hey there! Let's work through your carousel problems step by step—multi-item carousels in AngularJS are super common, but they do require a bit of extra setup compared to single-item ones.

1. Applying ng-repeat to a Multi-Element Carousel #

The core issue here is that standard ng-repeat iterates over individual items, but you need to group items into sets of 4 first. Here's how to do it:

Step 1: Group Your Data in the Controller #

First, split your original item array into sub-arrays where each sub-array contains 4 items. Add this logic to your AngularJS controller:

angular.module('yourApp').controller('CarouselCtrl', function($scope) {
  // Your full list of carousel items
  $scope.carouselItems = [
    { id: 1, content: 'Item 1' },
    { id: 2, content: 'Item 2' },
    { id: 3, content: 'Item 3' },
    { id: 4, content: 'Item 4' },
    { id: 5, content: 'Item 5' },
    { id: 6, content: 'Item 6' },
    { id: 7, content: 'Item 7' },
    { id: 8, content: 'Item 8' }
    // Add more items as needed
  ];

  // Group items into sets of 4
  $scope.groupedItems = [];
  const groupSize = 4;
  for (let i = 0; i < $scope.carouselItems.length; i += groupSize) {
    $scope.groupedItems.push($scope.carouselItems.slice(i, i + groupSize));
  }
});

Step 2: Nested ng-repeat in the Template #

Now use nested ng-repeat directives: the outer one loops through your grouped sets, and the inner one loops through the 4 items in each set. This creates a carousel slide for each group:

<div class="carousel-container">
  <div class="carousel-slides">
    <!-- Outer repeat: each slide is a group of 4 items -->
    <div ng-repeat="group in groupedItems track by $index" class="carousel-slide">
      <!-- Inner repeat: each item in the group -->
      <div ng-repeat="item in group" class="carousel-item">
        <!-- Your item content goes here -->
        <p>{{item.content}}</p>
      </div>
    </div>
  </div>
</div>

2. Fixing Active Class & Enabling 4-Item Group Navigation #

Your current issue with the active class is likely because it's applied to individual items instead of the entire slide group. Here's how to fix that and add navigation:

Step 1: Track the Active Slide Index #

Add a currentSlideIndex variable to your controller to track which group is active, plus functions to navigate between slides:

angular.module('yourApp').controller('CarouselCtrl', function($scope) {
  // ... (previous groupedItems code) ...

  // Track active slide
  $scope.currentSlideIndex = 0;

  // Navigate to next slide
  $scope.goToNextSlide = function() {
    $scope.currentSlideIndex = ($scope.currentSlideIndex + 1) % $scope.groupedItems.length;
  };

  // Navigate to previous slide
  $scope.goToPrevSlide = function() {
    $scope.currentSlideIndex = ($scope.currentSlideIndex - 1 + $scope.groupedItems.length) % $scope.groupedItems.length;
  };
});

Step 2: Apply active Class to the Slide Group #

Update your template to apply the active class to the entire slide group based on currentSlideIndex:

<div class="carousel-container">
  <div class="carousel-slides">
    <div 
      ng-repeat="group in groupedItems track by $index" 
      class="carousel-slide"
      ng-class="{ active: $index === currentSlideIndex }"
    >
      <div ng-repeat="item in group" class="carousel-item">
        <p>{{item.content}}</p>
      </div>
    </div>
  </div>

  <!-- Navigation controls -->
  <button class="carousel-nav prev" ng-click="goToPrevSlide()">←</button>
  <button class="carousel-nav next" ng-click="goToNextSlide()">→</button>
</div>

Step 3: CSS to Display 4 Items Per Screen #

Add CSS to ensure each slide takes up the full width, and the 4 items inside it are displayed side-by-side:

.carousel-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.carousel-slides {
  display: flex;
  transition: transform 0.3s ease;
}

.carousel-slide {
  flex: 0 0 100%; /* Each slide takes full width */
  display: flex;
  justify-content: space-around;
}

.carousel-item {
  flex: 0 0 23%; /* 4 items per slide (23% leaves small gaps) */
  padding: 1rem;
  box-sizing: border-box;
}

/* Hide inactive slides */
.carousel-slide:not(.active) {
  display: none;
}

Key Notes: #

• The active class now controls which entire slide group is visible, not individual items.
• The CSS uses flexbox to ensure 4 items fit per slide—adjust the flex-basis value if you need more/less spacing.
• The navigation functions use modulo arithmetic to loop back to the first slide when you reach the end, and vice versa.

内容的提问来源于stack exchange，提问作者DJ GABRU GARRY