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