AngularJS + Ionic. Ng-repeat. Insert element between steps in loop

Question

AngularJS + Ionic. Ng-repeat. Insert element between steps in loop

We have 2 loops. Like these:

<ion-list>
  <ion-item ng-repeat="pair in items">
      <div class="row">
          <ion-item ng-repeat="item in pair" class="col-45">
              {{item}}
          </ion-item>
      </div>
  </ion-item>
</ion-list>

I want to insert element between items in second loop with class col-10. What's the best way to do it? Are there any way to force ng-repeat to insert custom element between steps? Or way to replace it with classic for loop?

Final layout should look like this:

<div class="row"> 
  <div class="col-45"></div>
  <div class="col-10"></div>
  <div class="col-45"></div>
</div>

UPD: In pair array, recieved from controller, we have elements [1,2]. Result must be:

<div class="row"> 
  <div class="col-45">1</div>
  <div class="col-10"></div>
  <div class="col-45">2</div>
</div>

javascript
angularjs
ionic-framework

Answer 1

You could use $odd property and a conditional class with ng-class so it should be like:

<ion-list>
 <ion-item ng-repeat="pair in items">
  <div class="row">
      <ion-item ng-repeat="item in pair" ng-class="{true:'col-45', false:'col-10'}[$odd]">
          {{item}}
      </ion-item>
  </div>

Or

Using ng-class-odd and ng-class-even

<ion-list>
 <ion-item ng-repeat="pair in items">
  <div class="row">
      <ion-item ng-repeat="item in pair" ng-class-odd="'col-45'" ng-class-even="'col-10'">
          {{item}}
      </ion-item>
  </div>

heres an example: http://plnkr.co/edit/Ueawsp9Xc7Ri8qKwLQ1N?p=preview

Answer 2

Updated:

Without adding extra divs, i found a solution using jquery. i can't think of a way in pure angular, maybe with a directive or ng-include. Have to think about this some more, but here you go:

<ion-list>
      <ion-item ng-repeat="(parentIndex, pair) in items">
          <div class="row">
              <ion-item ng-repeat="item in pair"
                        class="col-45 item-{{parentIndex}}-{{$index}}"
                        ng-init="insertAfter(parentIndex, $index)">
                  {{item}}
              </ion-item>
          </div>
      </ion-item>
  </ion-list>

In your controller you have something like:

$scope.items = [
   [ "someValue", "someOtherValue" ],
   [ "someValue", "someOtherValue" ]
];

$scope.insertAfter = function(parentIndex, index){
   if(index < $scope.items[parentIndex].length){
       $timeout(function(){
           jQuery( "<div class='col-10'> or maybe include a template here </div>" )
                 .insertAfter(".item-"+parentIndex+"-"+index );
       }, 0);
   }
};

If you want to insert directives you have to compile it first, so a directive which does all this for you would be better instead of using the controller.

Previous answer:

More of a quick and dirty hack than a real solution

<ion-list>
   <ion-item ng-repeat="pair in items">
       <div class="row some-container">
           <div ng-repeat="item in pair">
               <ion-item class="col-45">
                   {{item}}
               </ion-item>
               <div class="col-10"></div>
           </div>
       </div>
   </ion-item>
</ion-list>

.some-container div.col-10:last-child { display: none; }

well markup is not exactly how you want it, but maybe it helps.