29

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

esafwan
  • 17,311
  • 33
  • 107
  • 166
  • 2
    read ng-repeat-start and ng-repeat-end. – wayne Nov 01 '14 at 10:04
  • Hello @wayne, thanks for this. Though this didn't solve my problem. I never knew that this existed. The answer below seems to be the solution for me now. – esafwan Nov 01 '14 at 11:07

6 Answers6

46

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.

Patrick Reck
  • 11,246
  • 11
  • 53
  • 86
  • 2
    I was having do this but with %3 with a lot of markup inside the ng-repeat. Instead of repeating my code 3 times I found I could do an embedded ng-repeat like this: ng-repeat="i in [$index+0,$index+1,$index+2]" and then I only had to do my markup once and reference list_of_items[i] – chad Jun 03 '15 at 13:38
14

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

Aladdin Mhemed
  • 3,817
  • 9
  • 41
  • 56
  • This works great, but only if you have an even amount of numbers. Otherwise, it leaves a trailing div. I had to add another wrapping div around the `.col.col-50` with `ng-if="number"` to ignore the trailing empty number. – joshwhatk Mar 31 '16 at 15:24
  • 2
    @joshwhatk simple solution would be adding ng-if this way: `
    `
     – ET-CS Jun 02 '16 at 17:35
  • @ET-CS you are absolutely correct, adding `ng-if` directly is much more concise. I was unable to edit the comment to add that, thanks! – joshwhatk Jun 02 '16 at 17:51
6

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];
}
Zao
  • 141
  • 1
  • 6
3

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>
Ricky Levi
  • 7,298
  • 1
  • 57
  • 65
  • for Ionic4, with tags of `` and `` just set the `size="x"` - when the columns will reach the max of 12 - the row will drop. but w/o `size` attribute - they will all be squeezed in a single row ... – Ricky Levi Aug 14 '19 at 09:06
3

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>
sixten
  • 31
  • 2
0

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>
Ravishankar
  • 1
  • 2