angular.js ng-repeat 用于创建网格 [英] angular.js ng-repeat for creating grid

问题描述

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

我正在尝试创建的网格是这样的，使用 ng-repeat 重复.

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

我尝试使用 ng-if 和 ($index % 3 == 0) 来添加行，但这似乎不起作用.任何建议都会很棒！

谢谢！

这是我最终使用的代码:

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

解决方案

这是一个旧答案！

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

原答案

您始终可以将重复的列表拆分为控制器中的列表列表(每个列表包含三个项目).所以你列出的是:

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

然后重复如下:

<div ng-repeat="item in items" class="col-md-4">物品

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

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-repeat 用于创建网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！