Карусель с ограничением ng-repeat до 3 в одной карусели - PullRequest
Новая
       6

Карусель с ограничением ng-repeat до 3 в одной карусели

0 голосов
/ 27 мая 2018

Я пытаюсь использовать ng-repeat с каруселью.Но 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]

1 Ответ

0 голосов
/ 27 мая 2018

Я бы разбил массив 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).

...