Сделайте ng-repeat для img в карусели

Question

У меня есть рабочий пример карусели в angularJS

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner container">


            <div class="carousel-item active">
                <img class="img-fluid myImgClass imgMargin center-img d-block" src="/Content/FilesBlog/23.11.2018/85/GBP.png"
                    alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="img-fluid myImgClass imgMargin center-img d-block" src="/Content/FilesBlog/23.11.2018/85/GBP.png"
                    alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="img-fluid myImgClass imgMargin center-img d-block" src="/Content/FilesBlog/23.11.2018/85/GBP.png"
                    alt="Third slide">
            </div>
        </div>
        <a class="carousel-control-prev" data-target="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" data-target="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

Но мне нужно сделать это следующим образом: нажмите на маленькое фото на посте и откроется модальное со всей фотографией поста. Я знаю, как сделать модальный. У меня проблема с ng-repeat и ng-class

Мой код

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner container">
            {{item = 0}}
            <div ng-repeat="img in imgModal"
                 ng-class="item == 0 && carousel-item active || item >= 0 && carousel-item">
                <img class="img-fluid myImgClass imgMargin center-img d-block"
                     src="{{img}}" alt="First slide">
            </div>
            {{item + 1}}

        </div>
        <a class="carousel-control-prev" data-target="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" data-target="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

И в результате у меня нет карусели. Все Imgs идет друг под другом, такой простой div в html. Что я должен сделать, чтобы это хорошо работало?!

Answer 1

Проблема в том, что вы передаете логику только в ng-класс, где ng-класс работает от объектно-подобного синтаксиса для сценариев "if": "then". https://docs.angularjs.org/api/ng/directive/ngClass#examples

Синтаксис класса ng подобен {"если эта логическая вещь верна": "тогда примените эти классы"}

Вам также нужен только ng-класс для классов, которые будут динамически изменяться / обновляться. Поскольку все div имеют класс "carousel-item", ему не нужен ng-класс.

Наконец, вам нужно будет хранить изображения в каком-либо объекте, чтобы отслеживать, какой из них активен или не активен (или отслеживать activeImage в другой переменной).

Контроллер:

imgModal = [
{src: 'example/source.jpg', active: true},
{src: 'example/source.jpg', active: false},
{src: 'example/source.jpg', active: false}
];

Шаблон:

        <div class="carousel-inner container">
            <div ng-repeat="img in imgModal"
                 class="carousel-item"
                 ng-class="{
                        'img.active': 'active'
                 }">
                <img
                    class="img-fluid myImgClass imgMargin center-img d-block"
                    ng-src="{{img.src}}" />
            </div>
        </div>