Question

如何使用Angular.js有条件地关闭标签？例如，在附加的plunk中，如何关闭fluid-row div并在每五个项目后创建一个新的div，这样每行只显示五个项目。

http://plnkr.co/edit/WFC9Jmm6afT2Za7TKiMj?p=preview

Answer 1

使用ng-repeat实际上无法实际关闭标签。解决问题的两种方法：

指令需要更多工作，但您可以有条件地关闭标记
嵌套两个ng-repeats（我还没试过）：

第一个ng-repeat将从0迭代到Math.round（total / 5）。您可以通过在$ rootScope上使用range（）函数来实现此目的，您可以像下面的

那样定义

angular.module('yourApp').run(['$rootScope', function ($rootScope) {
    $rootScope.range = function (start, end) {
        var i,
            range = [];
        for (var i = start; i < end; i += 1) {
            range.push(i);
        }
        return range;
    };
});

然后使用切片滤镜或偏移滤镜

嵌套ng-repeat

angular.module('yourApp').filter('slice', function () {
    return function(array, start, end) {
       return array.slice(start, end);
    }
});

angular.module('yourApp').filter('offset', function () {
    return function(array, from) {
       return array.slice(from);
    }
});

在你的部分

  <div class="fluid-row" ng-repeat="n in range(0, Math.round(item.length / 5))">
    <div class="click panel col-lg-2" ng-repeat="item in items | offset:$index*5 | limitTo:5">
        <img src="{{item.Image}}" width="150" height="150">
    </div>
  </div>

如何使用Angular.js有条件地关闭标签？

1 个答案: