2017-06-05 57 views
1

我使用引導程序輪播,它分爲項目。 第一項應始終與活動類和其他只有class = item。在引導程序輪播中的每個項目中指定行號

我請求數據,並得到響應使用angularjs,試圖填補與NG-重複的項目

我現在的問題是第一項應該是類=項目活躍,並只獲得4行。 其他項目應與class = item和每個項目只有4行。

請求響應超過70行。我在這裏卡住了,我怎麼能devide 70行4在第一活動類,其餘在其他項目(4行中的每個項目)

旋轉木馬代碼:

<div id="myCarousel" class="carousel slide"> 


    <div class="carousel-inner"> 
     <div class="item active"> 
      <div class="row"> 
       <div class="col-sm-3"><a href="#x"><img src="images/restaurants/kababji.jpg" alt="Image" class="img-responsive"><Br><center>Kababji</center></a> 
       </div> 
       <div class="col-sm-3"><a href="#x"><img src="images/restaurants/alsaniour.jpg" alt="Image" class="img-responsive"><Br><center>Al Saniour</center></a> 
       </div> 
       <div class="col-sm-3"><a href="#x"><img src="images/restaurants/pizzahut.jpg" alt="Image" class="img-responsive"><Br><center>Pizza Hut</center></a> 
       </div> 
       <div class="col-sm-3"><a href="#x"><img src="images/restaurants/tabliyetmassaad.jpg" alt="Image" class="img-responsive"><Br><center>Tabiliyet Massaad</center></a> 
       </div> 
      </div> 

     </div> 

     <div class="item"> 
     <div class="row"> 
       <div class="col-sm-3"><a href="#x"><img src="images/restaurants/burgerking.png" alt="Image" class="img-responsive"><Br><center>Burger King</center></a> 
       </div> 
       <div class="col-sm-3"><a href="#x"><img src="images/restaurants/malektaouk.jpg" alt="Image" class="img-responsive"><Br><center>Malek Taouk</center></a> 
       </div> 
       <div class="col-sm-3"><a href="#x"><img src="images/restaurants/pizzahut.jpg" alt="Image" class="img-responsive"><Br><center>Pizza Hut</center></a> 
       </div> 
       <div class="col-sm-3"><a href="#x"><img src="images/restaurants/tabliyetmassaad.jpg" alt="Image" class="img-responsive"><Br><center>Tabiliyet Massaad</center></a> 
       </div> 
      </div> 

     </div> 

    </div> 
+1

你的意思是這樣的https://jsfiddle.net/ADukg/11487/? – talentedandrew

+0

eum no it's close –

+1

看看這個https://jsfiddle.net/ADukg/11489/ – talentedandrew

回答

1

由於您需要在一個輪播項目中顯示4個響應數組項,您可以使用ng-repeat遍歷您的響應數組,並僅顯示其索引完全可被4整除的項目。例如,您需要的數組中有20個項目你可以在你的ng-repeat中使用ng-if只顯示0,8,8等項目。即($index % 4 == 0),在裏面你可以顯示第一,第四,第五的第0,1,2和3項,第6排和第7排......等等。

這是fiddle展示相同。

+1

現在100%工作:D非常感謝你 –

+1

@ElioChamy歡迎兄弟:) – talentedandrew