Question

177

angular.js ng-repeat for creating grid

rated 0 times [ 183] [ 6] / answers: 1 / hits: 44256 / 11 Years ago, fri, november 22, 2013, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

paulinap

Add To Favorites

Follow

Total Points: 346

Total Questions: 86

Total Answers: 97

Location: Dominican Republic

Member since Sun, Sep 4, 2022

2 Years ago

answered 11 Years ago neildrews · Accepted Answer

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.