javascript - AngularJS + ionic 。吴重复。在循环中的步骤之间插入元素

Question

我们有 2 个循环。像这样:

<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-repeat 在步骤之间插入自定义元素？或者用经典的 for 循环替换它的方法？

最终布局应该是这样的:

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

UPD:在从 Controller 接收到的成对数组中，我们有元素 [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 的解决方案。我想不出一种纯 Angular 方法，也许使用指令或 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>

在你的 Controller 中你有这样的东西:

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

如果你想插入指令，你必须先编译它，所以一个为你做所有这些的指令会比使用 Controller 更好。

上一个答案:

与其说是真正的解决方案，不如说是快速而肮脏的 hack

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

好吧，标记并不是您想要的，但也许它会有所帮助。