web-dev-qa-db-ja.com

Angular ng-repeat-Ionic Grid

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項目ごとに行タグを含む/ラップするようにしたくないのです。これを達成する最良の方法は何ですか？

Ref：Ionic Grid Doc

angularjsgridangularjs-ng-repeationic-framework
28
esafwan

私は$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>

こちら 動作中のJSFiddle。

46
Patrick Reck

@Patrick Reckのソリューションは優れていますが、コードを2回繰り返す必要があり、

私はこの改善を提案します：

    <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であるかのようにコードを1回作成します。

14
Aladdin Mhemed

Flex-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];
}
6
Zao

このように書くと、$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>
2
Ricky Levi

このソリューションはフレックスフローを使用しており、これを見事に解決しています。

[〜＃〜] 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>
2
sixten