Create Row Every After 2 Item In Angular Ng-repeat - Ionic Grid


Answer :

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.



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



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];
}


Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable