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

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>

我想在 class col-10 的第二个循环中的项目之间插入元素。最好的方法是什么？有没有办法强制 ng-repeat 在步骤之间插入自定义元素？或者用 classic for loop 替换它的方法？

最终布局应如下所示：

<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

你可以使用 $odd 属性和条件 class with ng-class 所以它应该是这样的：

<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-class-odd 和 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>

举个例子：http://plnkr.co/edit/Ueawsp9Xc7Ri8qKwLQ1N?p=preview

Answer 2

已更新：

在不添加额外 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>

在你的控制器中你有这样的东西：

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

井标记并不是您想要的，但也许它有帮助。

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

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

javascript

angularjs

ionic-framework

已更新：

上一个回答：