Bagaimana untuk Memisahkan Data ng-repeat kepada Tiga Lajur Menggunakan Bootstrap?

Memisahkan Data ng-repeat kepada Tiga Lajur Menggunakan Bootstrap

Apabila bekerja dengan ng-repeat dalam AngularJS, adalah perkara biasa untuk mengatur data ke dalam berbilang lajur. Artikel ini meneroka kaedah yang berbeza untuk membahagikan data ng-repeat kepada tiga lajur menggunakan Bootstrap.

Transformasi Data dalam Pengawal

Pendekatan yang paling boleh dipercayai ialah mengubah data dalam pengawal. Ini membolehkan anda mengekalkan struktur data asal sambil mencipta tatasusunan baharu data terkumpul. Anda boleh menggunakan fungsi seperti berikut:

<code class="javascript">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);

Pada pandangan anda, lelaran pada data yang terpotong:

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

Tapis dalam Paparan (Tidak Disyorkan untuk Input)

Walaupun mungkin untuk menggunakan penapis untuk memaparkan data terkumpul, adalah penting untuk ambil perhatian bahawa kaedah ini tidak sesuai digunakan dengan input. Sebaliknya, bergantung pada transformasi data dalam pengawal.

Lajur Menegak

Untuk reka letak lajur menegak, anda boleh mengubah suai CSS atau menggunakan fungsi tersuai untuk menyusun elemen:

Lajur CSS (Diutamakan)

<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>

Fungsi Tersuai

Sebagai alternatif, anda boleh mengedarkan senarai tidak sekata secara menegak menggunakan fungsi tersuai:

<code class="javascript">var data = ['a','b','c','d','e','f','g'];
$scope.columns = columnize(data, 3);
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>

Atas ialah kandungan terperinci Bagaimana untuk Memisahkan Data ng-repeat kepada Tiga Lajur Menggunakan Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!