如何将 ng-repeat 项目连续放置？

Question

我正在编写一个多张幻灯片引导轮播。我已经使用 2 ng-repeat 到对方一次显示多张幻灯片。但它在一列和多行中显示幻灯片。我希望 ng-repeat 将图像放在一行中。

我的代码：

 <div id="dynamiccontentcarousel" class="carousel slide " data-ride="carousel" data-interval="2000">
    <div class="carousel-inner  row w-100 mx-auto" role="listbox">
       <div data-ng-repeat="item in ExpItems" ng-class="{active : $first}" class="carousel-item col-md-3" >
           <div ng-repeat="img in item" class="row" style="flex-wrap: wrap" >
               <img class="img-fluid mx-auto d-block"  data-ng-src="image/{{img.img}}" style="width: 300px; height: 150px;" >
           </div>

       </div>
    </div>
</div>

js：

$scope.ExpItems = [];
var p = 0

var ItemLength = Math.floor($scope.exp_all_goods.length / 4)
while (p <= ItemLength) {
    var temp = []

    for (var k = 0; k < $scope.exp_all_goods.length; k++) {

        if (p == Math.floor(k / 4)) {

            temp.push($scope.exp_all_goods[k])
            console.log("temp", temp)
        }

    }
    $scope.ExpItems.push(temp)
    p++

}


data: [{
    img: 314. png
}, {
    img: 315. png
}, {
    img: 312. png
}, {
    img: 34. png
}, {
    img: 12. png
}]         

Answer 1

我认为你可以用一个 ng-repeat 来做到这一点，就像这样：

   <div class="carousel-inner">
        <div class="item" ng-class="{active:!$index}" ng-repeat="mCarousel in mCarousels">
            <div class="row text-center">
                <!-- ITEM-->
                <div class="span3">
                    <div class="thumbnail product-item">
                        <a href="#"><img src="{{mCarousel.screen.view1.img}}"></a>
                    </div>
                    <h3>Kitty 1</h3>
                    <p><a class="btn btn-large btn-block" href="{{mCarousel.screen.view1.href}}">View details »</a></p> 
                </div>  
                <!-- ITEM-->

                <!-- ITEM-->
                <div class="span3">
                    <div class="thumbnail product-item">
                        <a href="#"><img src="{{mCarousel.screen.view2.img}}"></a>
                    </div>
                    <h3>Kitty 2</h3>
                    <p><a class="btn btn-large btn-block" href="{{mCarousel.screen.view2.href}}">View details »</a></p> 
                </div>
                <!-- ITEM-->

                <!-- ITEM-->
                <div class="span3">
                    <div class="thumbnail product-item">
                        <a href="#"><img src="{{mCarousel.screen.view3.img}}"></a>
                    </div>
                    <h3>Kitty 3</h3>
                    <p><a class="btn btn-large btn-block" href="{{mCarousel.screen.view3.href}}">View details »</a></p> 
                </div>
                <!-- ITEM-->

                <!-- ITEM-->
                <div class="span3">
                    <div class="thumbnail product-item">
                        <a href="#"><img src="{{mCarousel.screen.view4.img}}"></a>
                    </div>
                    <h3>Kitty 4</h3>
                    <p><a class="btn btn-large btn-block" href="{{mCarousel.screen.view4.href}}">View details »</a></p> 
                </div>
                <!-- ITEM-->
            </div>
        </div>
    </div><!-- /INNER-->  
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel2" data-slide="prev"><i class="icon-chevron-left"></i></a>
    <a class="carousel-control right" href="#myCarousel2" data-slide="next"><i class="icon-chevron-right"></i></a>  
</div>

你的 JSON 可以是这样的：

 {"screen": {
    "view1":{
        "img" : "http://placekitten.com/609/300",
        "price": "Rs 100",
        "href": "http://www.bootstraptor.com"
    },
    "view2":{
        "img": "http://placekitten.com/610/300",
        "price": "Rs 101",
        "href":"http://www.bootstraptor.com"
    },
    "view3":{
        "img":"http://placekitten.com/602/300",
        "price": "Rs 102",
        "href":"http://www.bootstraptor.com"
    },
    "view4":{
      "img":"http://placekitten.com/603/300",
      "price": "Rs 103",
      "href":"http://www.bootstraptor.com"
    }
}