AngularJS Loops and Formatting

Question

very new to AngularJS so please forgive me if this is a stupid question.

I need to output my data in a grid like format (using Ionic) and i need to have a div for a

Answer 1

<div class="row" ng-repeat="photo in photos" ng-if="$index % 3 == 0" ng-init="photoIndex = $index">
    <div ng-repeat="i in [0,1,2]" ng-if="(photoIndex + i)<photos.length" class="col-33">
        <img ng-src="{{photos[photoIndex+i]}}">
    </div>
</div>

Here is a more compact version of the above answer.

Answer 2

Something like this? fiddle

<span style="float: left">{{item}}</span><br ng-if="($index+1)%3 == 0"/>

I simply break the line every three items, but we could expand on this approach.

Update with complete, working solution: fiddle

<div class="container">
    <div ng-repeat="item in items" ng-if="$index%3==0" class="row">
        <span ng-if="$index<items.length" style="float: left">{{items[$index]}}</span>
        <span ng-if="($index+1)<items.length" style="float: left">{{items[$index+1]}}</span>
        <span ng-if="($index+2)<items.length" style="float: left">{{items[$index+2]}}</span>
    </div>
</div>

The code is pretty self-explaining: the solution creates a row every three elements, and inserts the elements only if they actually exist.