angularjs - 行と列へのNg-Repeat配列

Question

これを読んでくれてありがとう。ng-repeat を使用してオプションのボックスのようなグリッドを作成する方法を考えていました。配列を取り、n番目のアイテムを繰り返してから、すべてのアイテムがリストされるまで次の行または列に移動したいと思います。例えば

[opt1,opt2,opt3,opt4,opt5,opt6,opt7]次のように表示したいような配列があると仮定します。

opt1 opt2 opt3
opt4 opt5 opt6
opt7

Answer 1

HAML と Bootstrap3 で申し訳ありません:

.row
  .col-lg-4
    %div{'ng:repeat' => "item in array.slice(0, array.length / 3)"}
      {{item}}
  .col-lg-4
    %div{'ng:repeat' => "item in array.slice(array.length / 3, array.length * 2/3)"}
      {{item}}
  .col-lg-4
    %div{'ng:repeat' => "item in array.slice(array.length * 2/3, array.length)"}
      {{item}}

フィルターを使用できる別のバージョンがあります。

<div class="row">
  <div class="col-md-4" ng-repeat="remainder in [0,1,2]">
    <span ng-repeat="item in array" ng-if="$index % 3 == remainder">{{item}}</span>
  </div>
</div>

Answer 2

ng-if と組み合わせて ng-repeat を単純に使用し、$index を使用してインデックスをオフセットする方が簡単だと思います。以下の翡翠に注意してください。

div(ng-repeat="product in products")
    div.row(ng-if="$index % 2 === 0")
      div.col(ng-init="p1 = products[$index]")
          span p1.Title
      div.col(ng-if="products.length > $index + 1", ng-init="p2 = products[$index + 1]")
          span p2.Title
      div.col(ng-if="products.length <= $index + 1")