Question

让我们说，我有一个对象数组，我想在几行中显示它。每行应包含特定数量的对象。基本上，它应该是这样的：

<div class="row">
    <div class="col-md-4">item</div>
    <div class="col-md-4">item</div>
    <div class="col-md-4">item</div>
</div>
<div class="row">
    <div class="col-md-4">item</div>
    <div class="col-md-4">item</div>
    <div class="col-md-4">item</div>
</div>
...

我用一个非常脏的技巧实现它，生成一个额外的数字数组并迭代它（4是一行中的一些对象）：

<div class="row titles-row" ng-repeat="row in outRange(series.length, 4)">
    <project-preview class="col-md-3" ng-repeat="project in series" ng-if="$index < (row + 1)*4&& $index >= (row)*4"></project-preview>
</div>

和outRange功能：

$scope.outRange = function(items_num, row_width) {
    items_num = items_num > 0 ? items_num : 0;
    var rows_num = Math.ceil(items_num / row_width);
    return Array.apply(null, Array(rows_num)).map(function (_, i) {return i;});
};

它有效，但我觉得应该有更好的方法来做到这一点。

Answer 1

如果这只是一个演示问题，当列总和超过12（它使用浮点数）时，bootstrap（它似乎你可能正在使用）会自动将其他对象放在一个单独的行上。但是，如果对象具有明显不同的大小，那么这可能看起来不那么好。尽管如此，我倾向于将其置于CSS的控制之下，而不是在javascript中。

一种方法是在容器上使用display: flexbox，它应该具有您想要的效果。查找此CSS属性以发现flexbox的真正优势。

如果您真的想在javascript中使用它，可以使用以下模板：

<div ng-class='{row: $index % 4 == 0}' ng-repeat='...'>
   <div class='col-md-4'>
          ..
   </div>
</div>

这将产生额外的div，但这可能是可以接受的。

Answer 2

使用过滤器从outRange数组中创建块，而不是series。 Lodash有一个块方法。或者你可以implement one yourself。

Answer 3

感谢您的想法。我提出了这个解决方案：

mainApp.filter('slice', function() {
    return function(array, row_width, scope) {
        if(array == undefined)
            return;
        if(scope.sliceResult != undefined)
            return scope.sliceResult;

        scope.sliceResult = [];
        var rows_num = Math.ceil(array.length / row_width);
        for(var i = 0; i < rows_num; i++) {
            scope.sliceResult.push(array.slice(i * row_width, i * row_width + row_width));
        }

        return scope.sliceResult;
    };
});

在这里我如何使用它：

<div class="row titles-row" ng-repeat="row in series | slice: 4 : this">
    <project-preview class="col-md-3" ng-repeat="project in row"></project-preview>
</div>

我仍然不喜欢我需要在过滤器内传递范围。

AngularJS：在单独的行

3 个答案: