Create Row every after 2 item in Angular ng-repeat - Ionic Grid - angularjs

Question

I need to create a strcuture as below in my app through ng-repeat.
<div class="row">
<div class="col-50">1</div>
<div class="col-50">2</div>
</div>
<div class="row">
<div class="col-50">3</div>
<div class="col-50">4</div>
</div>
Right now my code is as below:
<div class="row">
<label class="item item-radio col col-50" ng-repeat="a in question.answer">
<input type="radio" name="answers" class="a-{{ a.correct }}" value="{{ a.correct }}" ng-click='ansValue("{{ a.correct }}")'>
<div class="item-content">
<img src="img/ans/{{ a.option }}" />
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
But in the above code, its just a single row tag that I have. I wan't to somehow get the row tag contain/wrap every 2 items in the loop. What is the best way to achieve this?
Ref: Ionic Grid Doc

Answer 1

I managed to do it using $even.
<div ng-repeat="number in numbers">
<div class="row" ng-if="$even">
<div class="col col-50">{{numbers[$index]}}</div>
<div class="col col-50">{{numbers[$index + 1]}}</div>
</div>
</div>
Here's a working JSFiddle.

Answer 2

The solution from #Patrick Reck is excellent, but it forces you to repeat your code twice,
I suggest this improvement:
<div ng-repeat="number in numbers">
<div class="row" ng-if="$even">
<div class="col col-50"
ng-repeat="num in [numbers[$index],numbers[$index + 1]]">
{{num}}
</div>
</div>
</div>
this way you will write your code one time as if it is a normal ng-repeat

Answer 3

You can add flex-wrap: wrap to class row
http://jsfiddle.net/0momap0n/99/
<div ng-controller="MyCtrl">
<div class="row" style="flex-wrap: wrap">
<div class="col col-50" ng-repeat="number in numbers">{{number}}</div>
</div>
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.numbers = [1, 2, 3, 4, 5, 6];
}

Answer 4

I would write it like this, you can increase the $index % 3 to match the number of columns that you would like, this one will create 3 columns ...
<div class="row">
<div class="" ng-repeat="i in range(1, 9)">
<div class="clearfix" ng-if="$index % 3 == 0"></div>
<div class="col">
<h1>{{ i }}</h1>
</div>
</div>
</div>

Answer 5

This solution is using flex-flow and solves this brilliantly:
CSS
.container {
display: flex;
flex-flow: row wrap;
}
.item {
width: 50%;
}
HTML
<div class="container">
<div class="item" *ngFor="let number of numbers">
{{number}}
</div>

Answer 6

Try like below. you can create any number of columns by using the below code. all you need to use the size property of the ionic grid and replace noOfColumns with your what number of columns you want. in this case just use 2 for noOfColumns. it will work like a charm.
Angular grid is based on a 12 column layout with different breakpoints based on the screen size. ref: https://ionicframework.com/docs/layout/grid
<ion-grid>
<ion-row >
<ion-col ng-repeat="n in numbers" size="{{12/noOfColumns}}">
{{ n }}
</ion-col>
</ion-row>
</ion-grid>