AngularJS ng-repeat tanpa elemen html

Saat ini saya menggunakan potongan kode ini untuk membuat daftar:

<ul ng-cloak>
    <div ng-repeat="n in list">
        <li><a href="{{ n[1] }}">{{ n[0] }}</a></li>
        <li class="divider"></i>
    </div>
    <li>Additional item</li> 
</ul>

Namun, <div>elemen tersebut menyebabkan beberapa cacat rendering yang sangat kecil pada beberapa browser. Saya ingin tahu apakah ada cara untuk melakukan ng-repeat tanpa wadah div, atau beberapa metode alternatif untuk mencapai efek yang sama.

Seperti yang dikatakan Andy Joslin bahwa mereka sedang mengerjakan pengulangan ng berbasis komentar tetapi tampaknya ada terlalu banyak masalah browser . Untungnya AngularJS 1.2 menambahkan dukungan bawaan untuk pengulangan tanpa menambahkan elemen turunan dengan direktif baru ng-repeat-startdan ng-repeat-end.

Berikut adalah contoh kecil untuk menambahkan pagination Bootstrap :

<ul class="pagination">
  <li>
    <a href="#">&laquo;</a>
  </li>
  <li ng-repeat-start="page in [1,2,3,4,5,6]"><a href="#">{{page}}</a></li>
  <li ng-repeat-end class="divider"></li>
  <li>
    <a href="#">&raquo;</a>
  </li>
</ul>

Contoh kerja lengkap dapat ditemukan di sini .

John Lindquist juga memiliki video tutorial tentang ini di halaman egghead.io-nya yang sangat bagus .

KnockoutJS sintaks pengikat tanpa kontainer

Harap bersabar sebentar: KnockoutJS menawarkan opsi yang sangat nyaman untuk menggunakan sintaks pengikat tanpa kontainer untuk foreachpengikatannya seperti yang dibahas dalam Catatan 4 dari foreachdokumentasi penjilidan. http://knockoutjs.com/documentation/foreach-binding.html

Seperti yang diilustrasikan oleh contoh dokumentasi Knockout, Anda dapat menulis binding Anda di KnockoutJS seperti ini:

<ul>
    <li class="header">Header item</li>
    <!-- ko foreach: myItems -->
        <li>Item <span data-bind="text: $data"></span></li>
    <!-- /ko -->
</ul>

Saya rasa cukup disayangkan AngularJS tidak menawarkan jenis sintaks ini.

Angular ng-repeat-startdanng-repeat-end

Dalam cara AngularJS untuk memecahkan ng-repeatmasalah, sampel yang saya temukan adalah tipe jmagnusson yang diposting dalam jawabannya (membantu).

<li ng-repeat-start="page in [1,2,3,4,5]"><a href="#">{{page}}</a></li>
<li ng-repeat-end></li>

Pikiran asli saya setelah melihat sintaks ini adalah: benarkah? Mengapa Angular memaksakan semua markup ekstra yang tidak ingin saya lakukan dan itu jauh lebih mudah di Knockout? Tapi kemudian komentar hitautodestruct dalam jawaban jmagnusson mulai membuat saya bertanya-tanya: apa yang dihasilkan dengan ng-repeat-start dan ng-repeat-end pada tag terpisah?

Cara yang lebih bersih untuk menggunakan ng-repeat-startdanng-repeat-end

Setelah menyelidiki pernyataan hitautodestruct, menambahkan ng-repeat-endke tag terpisah persis seperti yang tidak ingin saya lakukan dalam banyak kasus, karena menghasilkan elemen yang sama sekali tidak berguna: dalam hal ini, <li>item yang tidak memiliki apa pun di dalamnya. Daftar paginasi Bootstrap 3 mengatur gaya item daftar sehingga terlihat seperti Anda tidak menghasilkan item yang berlebihan, tetapi ketika Anda memeriksa html yang dihasilkan, mereka ada di sana.

Untungnya , Anda tidak perlu melakukan banyak hal untuk mendapatkan solusi yang lebih bersih dan jumlah html yang lebih pendek: cukup letakkan ng-repeat-enddeklarasi di tag html yang sama yang memiliki ekstensing-repeat-start .

<ul class="pagination">
  <li>
    <a href="#">&laquo;</a>
  </li>    
  <li ng-repeat-start="page in [1,2,3,4,5]" ng-repeat-end><a href="#"></a></li>
  <li>
    <a href="#">&raquo;</a>
  </li>
</ul>

Ini memberikan 3 keuntungan:

1. lebih sedikit tag html untuk ditulis
2. tidak berguna, tag kosong tidak dibuat oleh Angular
3. ketika larik yang akan diulang kosong, tag dengan ng-repeattidak akan dibuat, memberi Anda keuntungan yang sama dengan pengikatan tanpa kontainer Knockout yang memberi Anda dalam hal ini

Tapi masih ada cara yang lebih bersih

Setelah meninjau lebih lanjut komentar di github tentang masalah ini untuk Angular, https://github.com/angular/angular.js/issues/1891 ,
Anda tidak perlu menggunakan ng-repeat-startdan ng-repeat-endmendapatkan keuntungan yang sama. Sebagai gantinya, bercabang lagi contoh jmagnusson, kita bisa pergi:

<ul class="pagination">
  <li>
    <a href="#">&laquo;</a>
  </li>
  <li ng-repeat="page in [1,2,3,4,5,6]"><a href="#">{{page}}</a></li>
  <li>
    <a href="#">&raquo;</a>
  </li>
</ul>

Jadi kapan harus digunakan ng-repeat-startdan ng-repeat-end? Sesuai dokumentasi sudut , untuk

... ulangi serangkaian elemen, bukan hanya satu elemen induk ...

Cukup bicara, tunjukkan beberapa contoh!

Cukup adil; jsbin ini menjelaskan lima contoh tentang apa yang terjadi saat Anda melakukannya dan saat Anda tidak menggunakan ng-repeat-endtag yang sama.

http://jsbin.com/eXaPibI/1/

ngRepeat mungkin tidak cukup, namun Anda dapat menggabungkannya dengan perintah kustom. Anda dapat mendelegasikan tugas untuk menambahkan item pembagi ke kode jika Anda tidak keberatan dengan jQuery.

 <li ng-repeat="item in coll" so-add-divide="your exp here"></li>

Direktif sederhana seperti itu tidak benar-benar membutuhkan nilai atribut tetapi mungkin memberi Anda banyak kemungkinan seperti menambahkan pembagi secara kondisional sesuai dengan indeks, panjang, dll atau sesuatu yang sama sekali berbeda.

Saya baru-baru ini mengalami masalah yang sama yaitu saya harus mengulangi koleksi span dan gambar yang sewenang-wenang - memiliki elemen di sekitarnya bukanlah pilihan - namun ada solusi sederhana, buat petunjuk "null":

app.directive("diNull", function() {
        return {
            restrict: "E",
            replace: true,
            template: ""
        };
    });

Anda kemudian dapat menggunakan pengulangan pada Elemen itu, di mana elemen.url menunjuk ke templat untuk elemen itu:

<di-null ng-repeat="element in elements" ng-include="element.url" ></di-null>

Ini akan mengulangi sejumlah templat berbeda tanpa wadah di sekitarnya

Catatan: hmm saya berani bersumpah ini menghapus elemen di-null saat rendering, tetapi memeriksanya lagi itu tidak ... masih menyelesaikan masalah tata letak saya ... lebih aneh dan lebih penasaran ...

Ada batasan perintah komentar, tetapi ngRepeat tidak mendukungnya (karena memerlukan elemen untuk diulang).

Saya rasa saya melihat tim sudut mengatakan mereka akan mengerjakan pengulangan komentar, tapi saya tidak yakin. Anda harus membuka masalah untuk itu di repo. http://github.com/angular/angular.js

Tidak ada cara ajaib Angular untuk melakukan ini, untuk kasus Anda, Anda dapat melakukan ini, untuk mendapatkan HTML yang valid, jika Anda menggunakan Bootstrap. Kemudian Anda akan mendapatkan efek yang sama seperti menambahkan li.divider

Buat kelas:

span.divider {
 display: block;
}

Sekarang ubah kode Anda menjadi ini:

<ul ng-cloak>
 <li div ng-repeat="n in list">
    <a href="{{ n[1] }}">{{ n[0] }}</a>
    <span class="divider"></span>
 </li>
 <li>Additional item</li>
</ul>

untuk solusi yang benar-benar berhasil

html

<remove  ng-repeat-start="itemGroup in Groups" ></remove>
   html stuff in here including inner repeating loops if you want
<remove  ng-repeat-end></remove>

tambahkan direktif angular.js

//remove directive
(function(){
    var remove = function(){

        return {    
            restrict: "E",
            replace: true,
            link: function(scope, element, attrs, controller){
                element.replaceWith('<!--removed element-->');
            }
        };

    };
    var module = angular.module("app" );
    module.directive('remove', [remove]);
}());

untuk penjelasan singkat,

ng-repeat mengikat dirinya sendiri ke <remove>elemen dan melakukan loop sebagaimana mestinya, dan karena kami telah menggunakan ng-repeat-start / ng-repeat-end, ia akan memutar blok html bukan hanya sebuah elemen.

lalu perintah hapus khusus menempatkan elemen <remove>awal dan akhir dengan<!--removed element-->