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 ：在从控制器收到的对数组中，我们有元素[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属性和带有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的解决方案。我无法想到纯粹的角度，也许有指令或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 + Ionic。伍重复。在循环中的步骤之间插入元素

2 个答案:

更新

上一个答案：