angular.js ng-repeat for creating grid

angularjs, javascript, twitter-bootstrap

Solution

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.

Problem

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

Original source