Question

我正在尝试使用轮播从数据库中检索已检索图像的幻灯片。我不知道这是正确的方式。但这段代码不起作用。我怎样才能做到这一点？

     <div class="" ng-repeat="d in photos">
      <div id="myCarousel" class="carousel slide" data-ride="carousel" ng-repeat="p in d.images">
     <!-- Indicators -->
    <ol class="carousel-indicators" >
     <li data-target="#myCarousel" {{p.name}}>{{$index}}</li>    
                    </ol>
     <!-- Wrapper for slides -->

 <div class="carousel-inner">
    <div class="item active" >
 <img ng-src="/{{d.images[0].url}}"/>
  </div>

  <div class="item">
 <img ng-src="/{{d.images[1].url}}" />
 </div>
 </div>

这是我的json

    "gender": 1,
    "colorId": null,
    "color": "Black",
     "name": Fire,
        "images": [
          {

            "url": "Content/Images/1.jpg"
          },
          {

            "url": "Content/Images/2.jpg"
          },
          {

            "url": "Content/Images/3.jpg"
          },
          {

            "url": "Content/Images/4.jpg"
          }
        ]

Answer 1

使用ng-repeat循环图像

<div class="" ng-repeat="d in photos">
<div id="myCarousel" class="carousel slide" data-ride="carousel" >
<!-- Indicators -->
<ol class="carousel-indicators" >
   <li data-target="#myCarousel"  data-slide-to="{{$index}}"  ng-repeat="item in d.images" ng-class="{'active' : $index == 0}"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
   <div class="item" ng-repeat="item in d.images" ng-class="{'active' : $index == 0}">
      <img ng-src="/{item.url}}" />
   </div>
</div>

Answer 2

检查这个非常干净的codePen：http://codepen.io/Fabiano/pen/LACzk

   <carousel interval="myInterval">
    <slide ng-repeat="slide in slides" active="slide.active">
      <img ng-src="{{slide.image}}">
      <div class="carousel-caption">
        <h4>Slide {{$index+1}}</h4>
      </div>
    </slide>
  </carousel>

希望有所帮助

来自angularjs中嵌套数组的slidshow

2 个答案: