如何用ng-repeat实现uib-carousel每页展示3个数组元素？

要实现每个轮播页展示3个元素的需求，核心思路是把原始的一维数组分组为二维数组，让轮播组件遍历分组后的数组，每个轮播项内部再渲染组内的3个元素。下面是具体修改步骤：

1. 调整JavaScript代码，添加数组分组与轮播控制逻辑 #

首先我们需要添加数组分组工具函数，监听原始数组变化自动更新分组结果，同时完善轮播切换的函数：

$scope.addCampus = newCampus; 
$scope.model = {}; 
$scope.model.campuses = [];
$scope.model.groupedCampuses = []; // 新增：存储分组后的二维数组
$scope.activeTestimonial = 0; // 轮播当前激活的索引
$scope.myInterval = false; // 关闭自动轮播，按需开启

// 新增：数组分组工具函数，每chunkSize个元素为一组
function splitIntoChunks(arr, chunkSize) {
    const chunks = [];
    for (let i = 0; i < arr.length; i += chunkSize) {
        chunks.push(arr.slice(i, i + chunkSize));
    }
    return chunks;
}

// 新增：监听原始数组变化，自动更新分组数组
$scope.$watch('model.campuses', function(newVal) {
    if (newVal) {
        $scope.model.groupedCampuses = splitIntoChunks(newVal, 3);
    }
}, true); // 深度监听数组元素的变化

function init(){ 
    console.log("Initing"); 
    $log.log("loading"); 
    newCampus(); 
} 

function newCampus() { 
    $log.log("Adding a new campus"); 
    for(let i=1;i<=3;i++){ // 改用let避免全局变量污染
        $scope.model.campuses.push({
            title: '', // 初始化默认值，避免ngModel绑定报错
            description: ''
        }); 
    } 
} 

// 新增：轮播上一页切换函数
$scope.prevQuickbiteSlide = function() {
    $scope.activeTestimonial = ($scope.activeTestimonial - 1 + $scope.model.groupedCampuses.length) % $scope.model.groupedCampuses.length;
};

// 新增：轮播下一页切换函数（修正了你原代码的拼写错误：nextQuiclbiteSlide → nextQuickbiteSlide）
$scope.nextQuickbiteSlide = function() {
    $scope.activeTestimonial = ($scope.activeTestimonial + 1) % $scope.model.groupedCampuses.length;
};

init();

2. 修改HTML代码，适配分组后的数组渲染 #

现在让轮播组件遍历分组后的数组，每个轮播项内部渲染组内的3个元素：

<button ng-if="model.campuses.length < 9" ng-click="newCampus()">Add</button>

<!-- 轮播组件：遍历分组后的二维数组 -->
<div uib-carousel active="activeTestimonial" interval="myInterval" no-wrap="noWrapSlides">
    <div uib-slide ng-repeat="group in model.groupedCampuses track by $index" index="$index" class="widget-slide">
        <!-- 每个轮播页内渲染3个元素，计算原始数组索引确保操作对应正确元素 -->
        <div ng-repeat="quickbite in group track by $parent.$index * 3 + $index" class="campus-item">
            <button ng-click="showDeleteDialog($parent.$index * 3 + $index, true)">
                delete {{$parent.$index * 3 + $index}}
            </button>
            <form name="formTestimonial[$parent.$index * 3 + $index]" role="form" novalidate show-validation>
                <div class="editor-div-flex editor-url">
                    <div class="login-lable label-editor label-editor-logo editor-div-flex">
                        Name: 
                    </div>
                    <div>
                        <input class="editor-input widget-input" type="text" ng-model="quickbite.title" name="title" required>
                    </div>
                </div>
                <div class="editor-div-flex editor-url">
                    <div class="login-lable label-editor label-editor-logo text-left">
                        <div>Description:</div>
                        <div class="editor-limits"> ( 300 char ) </div>
                    </div>
                    <div>
                        <textarea class="editor-textarea widget-input" ng-model="quickbite.description" maxlength="300" name="description" required></textarea>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 轮播控制按钮：只有分组数组长度>1时显示（更准确的判断逻辑） -->
<div ng-if="model.groupedCampuses.length > 1">
    <div class="carousel-arrow widget-carousel-arrow-left">
        <button class="demo-nav testimonial-arrow" ng-click="prevQuickbiteSlide()">
            <img src="/content/images/editor/left.png">
        </button>
    </div>
    <div class="carousel-arrow widget-carousel-arrow-right">
        <button class="demo-nav testimonial-arrow" ng-click="nextQuickbiteSlide()">
            <img src="/content/images/editor/right.png">
        </button>
    </div>
</div>

关键修改点说明 #

• 数组分组逻辑：通过splitIntoChunks把原始数组拆分为每3个元素一组的二维数组，并用$watch监听原始数组变化，自动同步分组结果。
• 轮播渲染适配：轮播组件现在遍历分组后的数组，每个轮播项内部再渲染组内元素，通过$parent.$index * 3 + $index计算原始数组的索引，确保删除等操作能精准对应到原始元素。
• 轮播切换优化：完善了上/下页的循环切换逻辑，同时修正了你原代码中nextQuiclbiteSlide的拼写错误。
• 按钮显示条件优化：把控制按钮的显示条件从model.campuses.length > 3改为model.groupedCampuses.length > 1，避免数组刚好3个元素时显示多余的切换按钮。

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