在Angular ng-repeat中的每2个项目之后创建行 - Ionic Grid

Question

我需要通过 ng-repeat 在我的应用中创建如下结构。

<div class="row">
  <div class="col-50">1</div>
  <div class="col-50">2</div>
</div>
<div class="row">
  <div class="col-50">3</div>
  <div class="col-50">4</div>
</div>

现在我的代码如下：

<div class="row">
  <label class="item item-radio col col-50" ng-repeat="a in question.answer">
  <input type="radio" name="answers"   class="a-{{ a.correct }}" value="{{ a.correct }}" ng-click='ansValue("{{ a.correct }}")'> 

  <div class="item-content">
     <img src="img/ans/{{ a.option }}" />
  </div>

  <i class="radio-icon ion-checkmark"></i>
  </label>
</div>

但在上面的代码中，它只是我拥有的一个单行标签。我不想以某种方式让行标签包含/包装循环中的每 2 个项目。实现这一目标的最佳方法是什么？

参考：Ionic Grid Doc

Answer 1

我设法使用$even 做到了。

<div ng-repeat="number in numbers">

    <div class="row" ng-if="$even">
        <div class="col col-50">{{numbers[$index]}}</div>
        <div class="col col-50">{{numbers[$index + 1]}}</div>
    </div>

</div>

Here's 一个工作的 JSFiddle。

Answer 2

@Patrick Reck 的解决方案非常好，但它会迫使您重复两次代码，

我建议改进：

    <div ng-repeat="number in numbers">    
        <div class="row" ng-if="$even">
            <div class="col col-50" 
                 ng-repeat="num in [numbers[$index],numbers[$index + 1]]">
                {{num}}
            </div>
        </div>
    </div>

这样你就可以像普通的 ng-repeat 一样编写一次代码

Answer 3

你可以添加 flex-wrap: wrap 到类行

http://jsfiddle.net/0momap0n/99/

<div ng-controller="MyCtrl">
    <div class="row" style="flex-wrap: wrap">
    <div class="col col-50" ng-repeat="number in numbers">{{number}}</div>
</div>  

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.numbers = [1, 2, 3, 4, 5, 6];
}

Answer 4

我会这样写，你可以增加$index % 3来匹配你想要的列数，这个会创建3列...

<div class="row">
   <div class="" ng-repeat="i in range(1, 9)">
     <div class="clearfix" ng-if="$index % 3 == 0"></div>

       <div class="col">  
         <h1>{{ i }}</h1>
       </div>

     </div>
</div>

Answer 5

此解决方案使用 flex-flow 并出色地解决了这个问题：

CSS

 .container {
    display: flex;
    flex-flow: row wrap;
  }
  .item {
    width: 50%;
  }

HTML

    <div class="container">
   <div class="item" *ngFor="let number of numbers">
      {{number}}
  </div>

Answer 6

尝试如下。您可以使用以下代码创建任意数量的列。您只需要使用离子网格的 size 属性并将 noOfColumns 替换为您想要的列数。在这种情况下，只需将 2 用于 noOfColumns。它会像魅力一样发挥作用。

角网格基于 12 列布局，根据屏幕大小具有不同的断点。参考：https://ionicframework.com/docs/layout/grid

<ion-grid>
    <ion-row >      
         <ion-col ng-repeat="n in numbers" size="{{12/noOfColumns}}">                   
                {{ n }}
         </ion-col> 
    </ion-row>  
</ion-grid>