一个轮播中 ng-repeat 限制为 3 个的轮播

Question

我正在尝试将 ng-repeat 与轮播一起使用。但是，在一个轮播中显示 3 个数组项，如果长度超过三个，则在下一个轮播中显示这些项。

下面的小sn-p，

    $scope.addCampus = newCampus;   
    $scope.model = {};
    $scope.model.campuses = [];

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


    function newCampus() {
        $log.log("Adding a new campus");
        for(i=1;i<=3;i++){
        $scope.model.campuses.push({});
        }
    }

    init();
});

HTML：

<button ng-if="model.campuses.length < 9" ng-click="newCampus()">Add</button>
<div uib-carousel active="activetTestimonial" interval="myInterval" no-wrap="noWrapSlides">
    <div ul-slide  ng-repeat="quickbite in model.campuses track by $index" index="$index" class="widget-slide">
        <button ng-click="showDeleteDialog($index, true)">delete {{$index}}</button>

        <form name="formTestimonial[$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 ng-if="model.campuses.length > 3">
    <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="nextQuiclbiteSlide()">
            <img src="/content/images/editor/right.png">
        </button>
    </div>
</div>

所以，我必须在一个轮播中显示 3 个项目。如果数组项超过 3 个，则应显示在下一个轮播中。

最终，第一个轮播将包含数组 [0]、数组 [1] 和数组 [2]。第二个轮播将有array[3]、array[4]和array[5]

Answer 1

我会使用此自定义分块方法将 campuses 数组分块为多个数组，其中每个数组包含 3 个项目：

var ceil = Math.ceil;

Object.defineProperty(Array.prototype, 'chunk', {value: function(n) {
   return Array(ceil(this.length/n)).fill().map((_,i) => this.slice(i*n,i*n+n));
}});

只需在您的数组上调用此方法，如下所示：[0,1,2,3,4,5].chunk(3)。