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




3 Answers

我设法使用$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。

我需要通过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-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];
}



我会这样写,你可以增加$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>



Related