角度.js ng 重复用于创建网格

公认的答案是显而易见的解决方案，但是表示逻辑应该保留在视图中，而不是在控制器或模型中。此外，我无法使OP的解决方案起作用。

当您有一个项目的平面列表(数组(时，有两种方法可以创建网格系统。假设我们的项目列表是一个字母表：

普伦克在这里

$scope.alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 
                   'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

方法一：

这是一个纯角度解决方案。

<div class="row" ng-repeat="letter in alphabet track by $index" ng-if="$index % 4 == 0">
  <div class="col-xs-3 letter-box" 
       ng-repeat="i in [$index, $index + 1, $index + 2, $index + 3]" 
       ng-if="alphabet[i] != null">
    <div>Letter {{i + 1}} is: <b> {{alphabet[i]}}</b></div>
  </div>
</div>

外部循环在每 4 次迭代后执行并创建一行。对于每次运行外部循环，内部循环迭代 4 次并创建列。由于无论数组中是否有元素，内部循环都会运行 4 次，因此如果数组在内部循环完成之前结束，ng-if确保不会创建多余的 col。

方法2：

这是更简单的解决方案，但需要角度滤波器库。

<div class="row" ng-repeat="letters in alphabet | chunkBy:4">
  <div class="col-xs-3 letter-box" ng-repeat="letter in letters" >
    <div>Letter {{$index + 1}} is: <b> {{letter}}</b></div>
  </div>
</div>

外部循环创建 4 个字母组，对应于我们的"行">

[['A', 'B', 'C', 'D'], ['E', 'F', 'G', 'H'], ... ]

内部循环循环访问组并创建列。

注意：方法 2 可能需要为外循环的每次迭代评估过滤器，因此方法 2 对于大型数据集可能无法很好地扩展。

古老的答案！

当我写这篇文章时，我对 Angular 还是有点陌生。下面有一个来自Shivam的更好的答案，我建议你改用。它将演示逻辑排除在控制器之外，这是一件非常好的事情。

原答案

您始终可以在控制器中将要重复的列表拆分为列表列表(每个列表有三个项目(。所以你列出的是：

$scope.split_items = [['item1', 'item2', 'item3'], ['item4', 'item5', 'item6']];

然后重复它：

<div ng-repeat="items in split_items" class="row">
    <div ng-repeat="item in items" class="col-md-4">
        item
    </div>
</div>

不确定是否有更好的方法。我也尝试过使用 ng-if 和 ng-switch，但我永远无法让它工作。

您可以简单地将数组分成控制器内部的 N 个子数组。示例代码：

var array = ['A','B','C','D','E','F','G','H'];
var chunk = function(arr, size) {
   var newArr = [];
      for (var i=0; i<arr.length; i+=size) {
          newArr.push(arr.slice(i, i+size));
      }
   return newArr;
};
$scope.array = chunk(array, 2);

现在在 *.html 文件中，您只需ng-repeat array

<div class="row" ng-repeat="chunk in array">
    <div class="col-md-6" ng-repeat="item in chunk">
         {{item}}
    </div>
</div>

对我来说，这种锻炼:)祝你好运！

可能会说下面的解决方案不遵循具有rowdiv的网格规则，但另一种解决方案是删除row类(或在ng-repeat之外使用它(并改用clearfix类：

<div class="col-md-12">
  <div ng-repeat="item in items">
    <div ng-class="{'clearfix': $index%3 === 0}"></div>
    <div class="col-md-4">{{item}}</div>
  </div>
</div>

据我所知，这看起来与row类几乎相同，但请评论可能的缺陷(除了我上面提到的那个(。

使用 ng-repeat-start 和 ng-repeat-end

<div class="row">
    <div ng-repeat-start="item in items track by $index" class="col-sm-4">
      {{item}}
    </div>
    <div ng-repeat-end ng-if="($index+1) % 3 == 0" class="clearfix"></div>
</div>

使用 .visible-* 类轻松适应不同的媒体查询

<div class="row">
    <div ng-repeat-start="item in items track by $index" class="col-lg-2 col-md-4 col-sm-6">
      {{item}}
    </div>
    <div ng-repeat-end>
        <div class="clearfix visible-lg-block" ng-if="($index+1) % 6 == 0"></div>
        <div class="clearfix visible-md-block" ng-if="($index+1) % 3 == 0"></div>
        <div class="clearfix visible-sm-block" ng-if="($index+1) % 2 == 0"></div>
    </div>
</div> 

我发现在主重复块之外具有行管理逻辑清晰简洁。关注点分离 ：-(

回答有点晚，但我使用了这个，我相信在某些情况下更好。您可以使用Angular Filter package及其ChunkBy过滤器来实现此目的。尽管此包对于此单个任务来说是一项繁重的工作，但其中还有其他有用的过滤器用于不同的任务。我使用的代码是这样的：

<div class="row mar-t2" ng-repeat="items in posts | chunkBy:3">
    <div class="col-md-4" ng-repeat="post in items">
        <img ng-src="{{post.featured_url}}" class="img-responsive" />
        <a ng-click="modalPop(post.id)"><h1 class="s04-bas2">{{post.title.rendered}}</h1></a>
        <div class="s04-spotbox2" ng-bind-html="post.excerpt.rendered"></div>
    </div>
</div>

我使用 ngInit 采用了略有不同的方法。 我不确定这是否是合适的解决方案，因为 ngInit 文档指出

ngInit 唯一合适的用途是别名 ngRepeat 的特殊属性，如下面的演示所示。除了这种情况之外，还应使用控制器而不是 ngInit 来初始化作用域上的值。

我不确定这是否属于这种情况，但我想将此功能从控制器中移开，以便模板设计者更轻松地自由地使用 bootstrap 按行分组。 我还没有测试它的绑定，但看到我正在跟踪$index我认为这应该不是问题。

很想听听反馈。

我创建了一个名为"splitrow"的过滤器，它接受一个参数(每行中有多少项的计数(

.filter('splitrow', function(){
    return function (input, count){
        var out = [];
            if(typeof input === "object"){
                for (var i=0, j=input.length; i < j; i+=count) {
                    out.push(input.slice(i, i+count));
                }
            }
        return out;
    }
});

在视图模板中，我按如下方式组织引导行：

<div ng-init="rows = (items|splitrow:3)">
    <div ng-repeat='row in rows' class="row">
        <div ng-repeat="item in row track by $index" class="col-md-4">
            {{item.property}}
        </div>
    </div>
</div>

我编辑了@Shivam的Plunker来使用这种方法。它不需要外部库。

普伦克

我的解决方案与@CodeExpress解决方案非常相似。我制作了一个batch过滤器，用于对数组的项目进行分组(名称是从 Twig 的对应过滤器借来的(。为了简单起见，我不处理关联数组。

angular.module('myapp.filters', [])
    .filter('batch', function() {
        var cacheInputs = [];
        var cacheResults = [];
        return function(input, size) {
            var index = cacheInputs.indexOf(input);
            if (index !== -1) {
                return cacheResults[index];
            }
            var result = [];
            for (i = 0; i < input.length; i += size) {
                result.push(input.slice(i, i + size));
            }
            cacheInputs.push(input);
            cacheResults.push(result);
            return result;
        }
    })
;

它可以这样使用：

<div ng-repeat="itemsRow in items|batch:3">
    <div class="row">
        <div ng-repeat="item in itemsRow">
            <div class="col-md-4">
                ...
            </div>
        </div>
    </div>
</div>

缓存筛选结果以避免10 $digest() iterations reached. Aborting!错误。

角度解的Angular2版本。

alphabet: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 
                   'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
<div *ngIf='alphabet && alphabet.length'>
    <div *ngFor='#letter of alphabet; #i = index' >
        <div class="row" *ngIf='i % 4 == 0'>
            <div class="col-md-3" *ngFor='#n of [i,i+1,i+2,i+3]'>
                {{alphabet[n]}}
            </div>
        </div>
    </div>
</div>

这应该有效

<div ng-repeat="item in items">
    <div ng-class="{row : ($index % 3 == 0)}">
        ... 
    </div>
</div>

Angular9 的更新：

<div class="container-fluid" *ngFor="let item of alphabet; let index = index">
  <div class="row" *ngIf="index % 4 == 0">
    <div *ngFor="let i of [index, index+1, index+2, index+3]">
      <div class="col-xs-3">{{alphabet[i]}}</div>
    </div>
  </div>
</div>