[angularjs] 在Angular ng-repeat - Ionic Grid中,每2个项目后创建一行



Answers

来自@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一样

Question

我需要通过ng-repeat在我的应用程序中创建如下的strcuture。

<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




这个解决方案是使用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>



Links