Question

我正在尝试使用ng-repeat和carousel。但是，要在一个轮播中显示3个数组项目，如果长度超过3个，那么这些项目将在下一个轮播中显示。

下面的小片段，

    $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]。第二个轮播将有数组[3]，数组[4]和数组[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)。

具有ng重复限制的旋转木马在一个旋转木马中限制为3

1 个答案: