AngularJS - 在ng-repeat中使用ng-switch有條件地應用HTML

Question

我有一個分頁的視頻縮略圖列表，我想在Bootstrap流體網格中顯示。我使用嵌套的ng-repeat來遍歷每個列表，分頁和內部的ng-repeat，以迭代子陣列中的每個視頻縮略圖。網格是3x6，所以當內部ng-repeat的索引是5的倍數（假設$ index從0開始）時，我想關閉一個流體行並開始一個新行。

<div ng-repeat="thumbList in thumbLists"> 
    <div ng-repeat="thumb in thumbList" class="row-fluid"> 
     <div class="span2"> 
      <a href="{{ thumb.URL }}"> 
       <img src="{{ thumb.thumbnailURL }}" width="160" height="85" alt="" class="img-responsive"> 
      </a> 
     </div> 
     <!-- ng-switch? --> 
    </div> 
</div> 

的列表是通過REST服務填充，使得當一個用戶點擊一個「下一個」按鈕，一個新的數組列表」被壓入名單'和動畫將在每個3×6柵格滑動。該結構是這樣的：

$scope.thumbLists = [ 
    [{URL: url, thumbnailURL: thumburl}, ...], // init 
    [{URL: url, thumbnailURL: thumburl}, ...], // pushed when user clicks 'next' 
    ... etc 
]; 

我的一切工作正常，我只是不知道如何有條件地在HTML代碼添加到關閉一行並開始一個新的，一旦該行打6以來的縮略圖在一個數組中給出。

例如，如果我有評論納克開關，我可以這樣做：

<div ng-switch="$index"> 
    <div ng-switch-when="$index % 6 == 5"> 
</div> 

使用1.0.8穩定版。必須支持IE8。

臨時解決方法 - 移除每個元素的左邊距是它的排第一：

<div ng-repeat="thumbList in thumbLists"> 
    <div class="row-fluid> 
     <div ng-repeat="thumb in thumbList" class="span2" ng-class="{nomargin: $index % 6 == 0}">    
      <a href="{{ thumb.URL }}"> 
       <img src="{{ thumb.thumbnailURL }}" width="160" height="85" alt="" class="img-responsive"> 
      </a> 
     </div> 
    </div> 
</div> 

仍希望找到一個解決方案，在那裏我可以有條件地插入/刪除HTML，可能使用一個指令。

Answer 1

ng-grid會爲你工作嗎？可以讓你不必處理細節。

http://angular-ui.github.io/ng-grid/

Answer 2

這適用於ng-switch - 但可能需要一些更多的調整，以避免額外的隱藏的範圍標記......

 <div ng-repeat="thumb in thumbList"> 
      <span ng-switch="$index % 5"> 
      <div class="row" ng-switch-when="0"> 
       <div class="col-sm-2"><img src="{{thumbList[$index+0].url}}" class="img-responsive"></div> 
       <div class="col-sm-2"><img src="{{thumbList[$index+1].url}}" class="img-responsive"></div> 
       <div class="col-sm-2"><img src="{{thumbList[$index+2].url}}" class="img-responsive"></div> 
       <div class="col-sm-2"><img src="{{thumbList[$index+1].url}}" class="img-responsive"></div> 
       <div class="col-sm-2"><img src="{{thumbList[$index+2].url}}" class="img-responsive"></div> 
      </div> 
      </span> 
     </div> 

http://bootply.com/86985