javascript - 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 服务填充，这样当用户单击“下一步”按钮时，一个新的数组列表将被推送到“列表”上，并且动画将在每个 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/