angular.js NG重复创建网格 [英] angular.js ng-repeat for creating grid

问题描述

我试图用引导3 angularjs创建一个网格。

我试图创建网格是这样的，重复使用NG重复。

 ＆LT; D​​IV CLASS =行＆GT;
 ＆LT; D​​IV CLASS =COL-MD-4＆GT;项目＆lt; / DIV＆GT;
 ＆LT; D​​IV CLASS =COL-MD-4＆GT;项目＆lt; / DIV＆GT;
 ＆LT; D​​IV CLASS =COL-MD-4＆GT;项目＆lt; / DIV＆GT;
＆LT; / DIV＆GT;
 

我已经使用 NG-如果与（$索引％3 == 0）添加的尝试行，但这似乎并没有工作的权利。任何建议将是巨大的！

感谢您！

编辑：这里是code我最终会与合作：

 ＆LT; D​​IV NG重复=项中的项目＆GT;
  ＆LT; D​​IV纳克级=行|（$索引％3 == 0）＆GT;
    ＆LT; NG-包括类=COL-SM-4SRC ='意见/项目/项目'＆GT;＆LT; / NG-包括＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

这是一个古老的答案！

我仍然在角位新当我写这一点。下面有一个更好的答案，从Shivam，我建议你使用来代替。它使presentation逻辑移出控制器，这是一个非常好的事情。

原来的答复

您可以随时拆你重复过成一个列表的列表清单（每三个项目），在您的控制器。所以你列表是：

  $ scope.split_items = [['ITEM1'，'ITEM2'，'项目3']，['ITEM4'，'ITEM5'，'ITEM6']];
 

和然后重复它作为：

 ＆LT; D​​IV NG重复=，在split_items项级=行＆GT;
    ＆LT; D​​IV NG重复=项项级=COL-MD-4＆GT;
        项目
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

不知道是否有更好的办法。我也试图与NG-if和NG-开关玩弄，但我永远无法得到它的工作。

I'm trying to create a grid using bootstrap 3 and angularjs.

The grid I'm trying to create is this, repeated using 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>

I've tried using ng-if with ($index % 3 == 0) to add the rows, but this doesn't seem to be working right. Any suggestions would be great!

Thank you!

EDIT: Here's the code I ended up going with that worked:

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

解决方案

This is an old answer!

I was still a bit new on Angular when I wrote this. There is a much better answer below from Shivam that I suggest you use instead. It keeps presentation logic out of your controller, which is a very good thing.

Original answer

You can always split the list you are repeating over into a list of lists (with three items each) in your controller. So you list is:

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

And then repeat it as:

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

Not sure if there is a better way. I have also tried playing around with ng-if and ng-switch but I could never get it to work.

这篇关于angular.js NG重复创建网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！