angular.js ng-repeat用于创建网格

Question

我正在尝试使用bootstrap 3和angularjs创建一个网格.

我试图创建的网格是这样,使用ng-repeat重复.

<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>

我已经尝试使用ng-ifwith ($index % 3 == 0)来添加行,但这似乎并没有正常工作.任何建议都会很棒!

谢谢!

编辑:这是我最终使用的代码:

<div ng-repeat="item in items">
  <div ng-class="row|($index % 3 == 0)">
    <ng-include class="col-sm-4" src="'views/items/item'"></ng-include> 
  </div>
</div>

Answer 1

接受的答案是明显的解决方案,但是表示逻辑应保持在视图中而不是控制器或模型中.此外,我无法让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'];

方法1:

这是一个纯粹的角度解决方案.

<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如果数组在内部循环完成之前结束,则确保不会创建无关的cols.

方法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可能无法很好地扩展到大型数据集.

Answer 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,但我永远无法让它工作.

Answer 3

您可以简单地将数组块化为控制器内部的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>

对我来说锻炼:)祝你好运!