2017-05-03 10 views
2

私はカルーセルでDBから取り出されたイメージのスライドショーをしようとしています。私はそれが正しいかどうかわからない。しかし、このコードは動作していない。これどうやってするの?ループへangularjsのネストされた配列からのslidshow

 <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" 
      } 
     ] 

答えて

2

利用NGリピート画像

<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> 
+0

その働きthx macho ..... – ManojKanth

+0

prob bro !!! –

+0

mcn私は複数の画像リストでこれを試しました。最初のリストのスライドショーは他のスライドショーを変更するだけでは変更できません。ここで何か変更する必要がありますか? – ManojKanth

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> 

はそれが役に立てば幸い

関連する問題