Angularjs Loops And Formatting

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 row and separat

Solution 1:

Something like this? fiddle

<spanstyle="float: left">{{item}}</span><brng-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.

Solution 2:

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

Here is a more compact version of the above answer.