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服务填充，这样当用户点击“下一步”按钮时，新的数组列表将被推送到“列表”，动画将在每个3x6网格上滑动。结构如下：

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

我所拥有的一切工作正常，我只是不确定如何有条件地添加HTML以关闭行并在该行达到6后开始新的行，因为缩略图是在单个数组中给出的。

例如，如果我有注释的ng-switch，我可以这样做：

<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

AngularJS - 在ng-repeat中使用ng-switch有条件地应用HTML

2 个答案: