时间戳

首页 > 解决方案 > angularjs轮播中的数组中的数组

arrays - angularjs轮播中的数组中的数组

问题描述

<div id="displayCarousel" class="carousel slide carousel-fade" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
    <div class="carousel-item" ng-class="{active:!$index}" ng-repeat="pics in advertimages">
    <div class="view">
                <span ng-repeat="x in pics.files">
                 <img ng-src="img/my_adverts/{{x}}" class="d-block w-100" alt="image">
               </span>
               <div class="mask rgba-black-light"></div>


    </div>
    <div class="carousel-caption">
    <h3 class="h3-responsive">From:</h3>
                <p>@{{pics.username}}</p>

    </div>

    </div>

    </div>

    <a class="carousel-control-prev" href="#displayCarousel" 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" href="#displayCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>

</div>

$scope.advertimages是数据库中的一个数组，该数组包含一个名为files的列，它也是一个数组。我遇到的问题是，如果$scope.advertimages中特定行的文件包含多个图像，则该行中的所有图像都将显示在轮播的单个页面上。

让我解释得更好。让我们假设第一行 advertimages 的列“文件”有一个图像。那么第二行 advertimages 的列'files'有三个图像。第一行的单个图像将占用轮播的单页，这是我想要的，但我遇到的问题是：第二行的三个图像将在轮播的单页上。我想要的是：第二行的三个图像也应该在轮播的不同页面上。

标签： arraysangularjsmultidimensional-arraymdbootstrap

解决方案

推荐阅读