AngularJS +离子。吴-重复。循环中各步骤之间插入元素

Question

我们有两个循环。就像这样：

<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>

我希望使用类col-10在第二个循环中的项之间插入元素。做这件事最好的方法是什么？是否有任何方法强制ng-重复在步骤之间插入自定义元素？或者用经典的for循环代替它？

最后的布局应该如下所示：

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

UPD：在对数组中，从控制器接收到元素1,2。结果必须是：

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

Answer 1

更新：

在不添加额外div的情况下，我找到了一个使用jquery的解决方案。我想不出一种纯角度的方法，可能是指令或ng-include。还得再想一想，但现在你要说的是：

<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>

在您的控制器中，您有如下内容：

$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);
   }
};

如果你想要插入指令，你必须先编译它，所以一个为你做这一切的指令会比使用控制器更好。

先前的答复：

与其说是一个真正的解决方案，不如说是一种快速而肮脏的黑客攻击。

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

好吧，标记并不完全是你想要的，但也许它有帮助。

Answer 2

您可以使用$odd属性和带有ng类的条件类，因此应该如下所示：

<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>

或

使用ng类奇数和ng类偶数

<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>

下面是一个例子：http://plnkr.co/edit/Ueawsp9Xc7Ri8qKwLQ1N?p=preview