Bagaimanakah saya boleh menyelaraskan data ng-repeat AngularJS ke dalam tiga lajur Bootstrap?

Menjajarkan Data ng-repeat AngularJS dalam Tiga Lajur Bootstrap

AngularJS menyediakan ng-repeat untuk mencipta elemen secara dinamik berdasarkan tatasusunan data. Apabila anda berurusan dengan sejumlah besar elemen, menjajarkannya ke dalam lajur boleh meningkatkan antara muka pengguna dan kebolehbacaan.

Transformasi Berasaskan Pengawal

Pendekatan pilihan ialah mengubah data dalam pengawal menggunakan fungsi chunk JavaScript, yang memecahkan data kepada kumpulan bersaiz sama rata:

<code class="js">function chunk(arr, size) {
  var newArr = [];
  for (var i=0; i<arr.length; i+=size) {
    newArr.push(arr.slice(i, i+size));
  }
  return newArr;
}

$scope.chunkedData = chunk(myData, 3);

ChunkedData yang diubah kemudiannya boleh dipaparkan dalam paparan seperti berikut:

<code class="html"><div class="row" ng-repeat="rows in chunkedData">
  <div class="span4" ng-repeat="item in rows">{{item}}</div>
</div></code>

Menapis dalam Paparan (Awas)

Walaupun boleh, menggunakan penapis untuk memotong data dalam paparan tidak disyorkan untuk tujuan mengikat data. Jika input digunakan dalam paparan yang ditapis, ia boleh menyebabkan ketidakkonsistenan.

<code class="html"><pre class="brush:php;toolbar:false">
<div ng-repeat="row in ['a','b','c','d','e','f'] | chunk:3">
  <div class="column" ng-repeat="item in row">
    {{($parent.$index*row.length)+$index+1}}. {{item}}
  </div>
</div>

Lajur Menegak

Untuk menjajarkan item secara menegak dan bukannya secara mendatar, variasi kaedah penggumpalan boleh digunakan:

<code class="js">function columnize(input, cols) {
  var arr = [];
  for(i = 0; i < input.length; i++) {
    var colIdx = i % cols;
    arr[colIdx] = arr[colIdx] || [];
    arr[colIdx].push(input[i]);
  }
  return arr;
}

<code class="html"><div ng-repeat="row in columns">
  <div class="column" ng-repeat="item in row">
    {{item}}
  </div>
</div></code>

Lajur CSS

Pilihan lain untuk mencipta lajur menegak ialah memanfaatkan lajur CSS:

<code class="css">.columns {
  columns: 3;
}</code>

<code class="html"><div class="columns">
  <div ng-repeat="item in ['a','b','c','d','e','f','g']">
    {{item}}
  </div>
</div></code>

Atas ialah kandungan terperinci Bagaimanakah saya boleh menyelaraskan data ng-repeat AngularJS ke dalam tiga lajur Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!