Bagaimanakah saya boleh memisahkan data ng-repeat kepada tiga lajur menggunakan AngularJS dan Bootstrap?

Memisahkan Data ng-ulang kepada Tiga Lajur

AngularJS membolehkan pembangun memaparkan data dinamik dalam halaman web menggunakan arahan ng-ulang. Walau bagaimanapun, apabila bekerja dengan sejumlah besar elemen data, ia sering menjadi perlu untuk menyusun elemen dalam susun atur berstruktur. Ini memerlukan pemisahan data kepada lajur, yang boleh dicapai menggunakan pelbagai pendekatan.

Menggabungkan Bootstrap untuk Penjajaran

Bootstrap, rangka kerja bahagian hadapan yang popular, menyediakan mekanisme mudah untuk mencipta susun atur grid yang responsif dan konsisten. Dengan memasukkan Bootstrap ke dalam kod kami, kami boleh menjajarkan kotak teks atau elemen bentuk lain dengan mudah ke dalam tiga lajur yang sama dan tersusun kemas.

Langkah 1: Transformasi Pengawal

Yang paling kaedah yang cekap dan boleh dipercayai untuk membahagikan data kepada lajur adalah dengan memanipulasinya dalam pengawal. Ini melibatkan mencipta fungsi chunk dan menggunakannya dalam arahan ng-repeat:

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

ganti ng-repeat dengan segmen kod baharu:

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

Kaedah ini memastikan bahawa data kekal dalam format asalnya dan boleh dimanipulasi atau diserahkan tanpa sebarang perubahan.

Langkah 2: Pecahan Berasaskan Paparan

Walaupun boleh melakukan pemisahan data menggunakan penapis dalam paparan, adalah penting untuk ambil perhatian bahawa pendekatan ini hanya sesuai untuk tujuan paparan. Sebarang elemen borang yang ditambahkan dalam paparan yang ditapis boleh membawa kepada isu yang berpotensi. Adalah disyorkan untuk memanipulasi data dalam pengawal untuk sebarang elemen interaktif. Walau bagaimanapun, jika anda masih ingin menggunakan chunking berasaskan paparan, anda boleh mempertimbangkan untuk menggunakan perpustakaan seperti lodash untuk meningkatkan kestabilan dan prestasinya.

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