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>

结果，我没有旋转木马。所有的Img都在html中这样简单的div之下。我必须做的事才能很好？！

Answer 1

问题是您仅将逻辑传递给ng-class，其中ng-class的工作原理类似于“ if”：“ then”场景的类对象语法。 https://docs.angularjs.org/api/ng/directive/ngClass#examples

ng-class语法类似于{“如果此逻辑为真”：“然后应用这些类”}

对于将动态更改/更新的类，您还只需要ng-class。由于所有div都将“ carousel-item”作为一个类，因此不需要ng-class。

最后，您需要将图像存储在某种对象中，以跟踪哪个是活动的或不活动的（或在其他变量中跟踪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>

在轮播中为img进行ng-repeat

1 个答案: