1

我有一个要在 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，也许使用指令。

4

2 回答 2

0

ng-grid 对你有用吗？可以省去你处理细节的麻烦。

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

于 2013-10-10T21:17:54.143 回答
0

这适用于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

于 2013-10-10T23:52:17.710 回答