Angular.js: ngUlangi dengan DL / DD / DT

kedua ini. Saya telah mengalami masalah ini untuk sementara waktu.

@IgorMinar melakukan beberapa pekerjaan pada ng-repeat berbasis komentar ( https://github.com/angular/angular.js/pull/1646 ) tetapi karena komentar tidak diputar dengan baik di semua browser, sepertinya tidak bergabung. Alih-alih mereka mencari solusi alternatif, mungkin dengan "mulai dan akhiri tag berulang" atau "mulai-ulangi dan jumlah elemen untuk mengulang label"

Bagaimana dengan mengizinkan template di dalam pasangan seperti {{ }}

mungkin:
{{! ng-repeat = "foo di l"

Pada catatan terkait, saya memiliki masalah serupa dengan Apakah ada tantangan teknis besar untuk formulir interpolasi kedua?
seperti {{{ }}} yang tidak lolos dari karakter html tetapi juga tidak membuat
rentang baru?

Pada Sel, Jan 29, 2013 di 12:38 PM, Pete Bacon Darwin <
[email protected]> menulis:

@IgorMinar https://github.com/IgorMinar melakukan beberapa pekerjaan pada
ng-repeat berbasis komentar (#1646https://github.com/angular/angular.js/issues/1646)
tetapi karena komentar tidak dapat diputar dengan baik di semua browser, hal itu tidak mungkin
terserap. Alih-alih mereka mencari solusi alternatif, mungkin
dengan "mulai dan akhiri ulangi tag" atau "mulai-ulangi dan jumlah
elemen untuk mengulang label"

—
Balas email ini secara langsung atau lihat di Gi tHubhttps://github.com/angular/angular.js/issues/1891#issuecomment -12856484.

Saya baru saja mengalami masalah ini dengan tabel yang ingin menghasilkan dua elemen 'td' per objek dalam sebuah array.

+1 untuk menambahkan fitur ini. Baru saja mengalami batasan yang sama ini.

:jempolan:

Masalah yang sama disini. Saya ingin melihat sesuatu seperti "ng-repeat-children" hanya mengulangi anak-anak tetapi bukan elemen saat ini atau semacam "ng-omit-tag" (yang menghapus tag saat ini tetapi membiarkan anak-anak di tempatnya) untuk digunakan bersama-sama dengan ng-ulangi. Ini akan menghindari banyak markup tidak valid yang dihasilkan untuk mengatasi masalah ini.

Tidak sepenuhnya memahami batasan yang sedang dibahas. Mengapa menempatkan ng-repeat pada elemen induk berhasil? http://jsfiddle.net/JyWdT/13/
Bisakah seseorang membuat biola yang menjelaskan masalah secara lebih rinci?

lgalfaso, Biola Anda membuat beberapa daftar definisi masing-masing dengan satu definisi. Output yang diinginkan adalah satu daftar definisi dengan beberapa definisi.

Atau dalam kasus saya, saya perlu membuat sepasang elemen "td" untuk setiap item dalam array.
Katakanlah saya punya array,

[{name:dan, age:15}, {name:steve, age:21}]

dan saya perlu mengeluarkan:

<tr><td>dan</td><td>15</td><td>steve</td><td>21</td></tr>

Tidak ada cara untuk mencapai itu dengan sudut saat ini.

tidak bisakah Anda melakukannya dengan meletakkan ng-repeat pada elemen tr?

http://plnkr.co/edit/lJvkOpz0NnKWcfEeM4lE?p=preview

Pada hari Minggu, 21 April 2013 pukul 14:24, zilles [email protected] menulis:

lgalfaso, biola Anda membuat beberapa daftar definisi masing-masing dengan satu
definisi. Output yang diinginkan adalah satu daftar definisi dengan banyak
definisi.

Atau dalam kasus saya, saya perlu membuat sepasang elemen "td" untuk setiap item di
sebuah array.
Katakanlah saya punya array,

[{ nama:dan , usia:15 }, { nama:steve , usia:21 }]

dan saya perlu mengeluarkan:

dan15steve21

Tidak ada cara untuk mencapai itu dengan sudut saat ini.

—
Balas email ini secara langsung atau lihat di Gi tHubhttps://github.com/angular/angular.js/issues/1891#issuecomment -16716788
.

Oh, begitu, abaikan komentar saya sebelumnya
Pada 21 Apr 2013 09:09, "jason turim" jason. [email protected] menulis:

tidak bisakah Anda melakukannya dengan meletakkan ng-repeat pada elemen tr?

http://plnkr.co/edit/lJvkOpz0NnKWcfEeM4lE?p=preview

Pada hari Minggu, 21 April 2013 pukul 14:24, zilles [email protected] menulis:

lgalfaso, biola Anda membuat beberapa daftar definisi masing-masing dengan satu
definisi. Output yang diinginkan adalah satu daftar definisi dengan banyak
definisi.

Atau dalam kasus saya, saya perlu membuat sepasang elemen "td" untuk setiap item di
sebuah array.
Katakanlah saya punya array,

[{ nama:dan , usia:15 }, { nama:steve , usia:21 }]

dan saya perlu mengeluarkan:

dan15steve21

Tidak ada cara untuk mencapai itu dengan sudut saat ini.

—
Balas email ini secara langsung atau lihat di Gi tHubhttps://github.com/angular/angular.js/issues/1891#issuecomment -16716788
.

Karena saya baru saja menemukan masalah dl / dt + dd, saya mengonfirmasi bahwa ng-repeat-children (atau ng-repeat-inner) baru adalah direktif wajib yang hilang.

+1

Proposal untuk direktif baru ng-repeat-inner. Jika proposal ini ok, maka akan memodifikasi semua panduan

Saya pikir akan lebih baik menggunakan direktif ng-repeat , tetapi izinkan arahan itu digunakan pada komentar HTML, seperti yang disarankan oleh posting asli.

Sesuatu seperti ini seharusnya berfungsi:

<dl>
  <!-- ng-repeat="(name, definition) in myList" -->
  <dt>{{name}}</dt>
  <dd>{{definition}}</dd>
  <!-- /ng-repeat -->
</dl>

Tidak yakin persis bagaimana awal dan akhir blok yang akan diulang akan dicapai ( <!-- /ng-repeat --> disarankan oleh @ProLoser), tetapi saya pikir menggunakan komentar HTML akan menjadi solusi yang elegan.

Mengingat bahwa minifier dapat mematikan komentar dan masalah lain dengan komentar, saya
tidak berpikir ini hebat. Namun, saya suka ide menggunakan ng-repeat.
apakah layak untuk memasukkan atribut ng-repeat-single-root atau
sesuatu yang ketika disetel ke true akan menjalankan ng-repeat tanpa root
elemen? Sebagai contoh:

{Saya}

{Saya}

akan menjadi:

1

1

2

2

3

3

Pada Selasa, 23 April 2013 pukul 15:54, Mani Tadayon [email protected] menulis :

Saya pikir akan lebih baik menggunakan direktif ng-repeat yang sama, tetapi izinkan
untuk arahan itu untuk digunakan pada komentar HTML, sebagai posting asli
menyarankan.

Sesuatu seperti ini seharusnya berfungsi:

{{nama}}

{{definisi}}

Tidak yakin persis bagaimana awal dan akhir blok harus diulang
akan tercapai (saya membuatdalam contoh saya),
tapi saya pikir menggunakan komentar HTML akan menjadi solusi yang elegan.

—
Balas email ini secara langsung atau lihat di Gi tHubhttps://github.com/angular/angular.js/issues/1891#issuecomment -16891970
.

maxcan, saya dapat melihat keuntungan dari "single-root", karena Anda menjaga html sumber tetap valid, tetapi konstruksi itu tidak memungkinkan Anda menambahkan apa pun di dalam tag "dl"... Definisi tetap misalnya yang Anda inginkan untuk disertakan sebelum loop definisi dinamis Anda. solusi lgalfaso akan menangani itu.

@maxcan tanpa pengerjaan ulang besar atau hit kinerja, saya rasa tidak mungkin untuk menambahkan properti ini ng-repeat-single-root (well, tambahkan dan buat dinamis berdasarkan itu). Rasionalnya adalah ada kemungkinan besar bahwa perubahan pada properti ini akan menyebabkan kompilasi ulang [dan tidak ada yang suka kompilasi ulang]

Saya suka saran @bowsersenior , tetapi saya lebih suka ini sebagai komentar penutup: <!-- /ng-repeat -->

Itu memalukan pada hit kinerja. Bagaimanapun, saya sangat mendukung
Solusi @lgalfaso , dengan asumsi Anda dapat meletakkan arahan dalam div dan bukan
hanya komentar..

Pada Wed, Apr 24, 2013 at 13:58, Dean Sofer [email protected] :

Saya suka saran @bowsersenior https://github.com/bowsersenior , tapi
Saya lebih suka ini sebagai komentar penutup:

—
Balas email ini secara langsung atau lihat di Gi tHubhttps://github.com/angular/angular.js/issues/1891#issuecomment -16964155
.

Saya setuju dengan @ProLoser bahwa <!-- /ng-repeat --> adalah tag penutup yang lebih baik dalam pendekatan komentar HTML. Satu catatan, sudut memungkinkan arahan untuk didefinisikan dalam komentar HTML, jadi saya tidak berpikir komentar HTML dapat dibuang sebagai solusi potensial untuk masalah ini. Ingatlah bahwa pengembang sudut inti mengindikasikan bahwa mereka berencana menggunakan komentar HTML untuk mengatasi masalah ini dalam pertanyaan stack overflow ini (seperti yang ditunjukkan oleh poster asli):

• http://stackoverflow.com/a/10458127/457819

Saya tidak keberatan membuangnya selama ada cara untuk melakukan ini tanpa
komentar.

Pada hari Rabu, 24 Apr 2013 pukul 14.41, Mani Tadayon [email protected] menulis :

Saya setuju dengan @ProLoser https://github.com/ProLoser bahwa adalah tag penutup yang lebih baik dalam pendekatan komentar HTML. Satu
perhatikan, sudut memungkinkan arahan untuk didefinisikan dalam komentar HTML, jadi saya tidak
berpikir komentar HTML dapat dibuang sebagai solusi potensial untuk ini
masalah. Ingatlah bahwa pengembang sudut inti menunjukkan bahwa mereka
berencana menggunakan komentar HTML untuk mengatasi masalah ini di stack overflow ini
pertanyaan (seperti yang ditunjukkan oleh poster asli):

• http://stackoverflow.com/a/10458127/457819

—
Balas email ini secara langsung atau lihat di Gi tHubhttps://github.com/angular/angular.js/issues/1891#issuecomment -16969268
.

+1 ke @lgalfaso ng-repeat-inner. Saya akhirnya menyukai sesuatu yang baru saja menyelesaikan ini.

Knockout melakukan ini dengan komentar. Saya mencoba mem-porting sesuatu yang saya lakukan dengan tag dl di knockout dan sepertinya itu tidak mungkin sampai masalah ini diatasi.

Ini pendapat saya, jadi tanpa masukan dari @mhevery atau @IgorMinar , ambil ini dengan sebutir garam.
Saya melihat bahwa membuat ng-repeat bekerja dengan komentar lebih fleksibel, bagaimanapun itu tidak terlihat alami tanpa perubahan ke $compiler sehingga dapat menangani arahan tipe "antara komentar". Alasannya karena terlihat aneh bahwa arahan perlu berhati-hati tentang bersarang dan mencari di luar elemen yang diberikan untuk melakukan apa yang seharusnya

Jika komentar/tidak ada komentar adalah alasan dari kontroversi yang sedang berlangsung, tidak bisakah kita memiliki keduanya? Saya merasa sulit untuk memahami bahwa masalah biasa seperti ini belum ditangani selama lebih dari 3 bulan. Jika alasan di balik ini terutama karena kontroversi implementasi, tampaknya lebih baik untuk memiliki sesuatu yang benar-benar diimplementasikan (dan mungkin diperbarui/ditambahkan di masa depan) daripada menunggu lebih lama tanpa sesuatu yang lebih "optimal".

Namun dalam kebanyakan kasus, menurut saya jika ng-repeat-inner mengacu pada pengulangan satu set elemen "dalam" sesuatu tertentu, itu menyiratkan bahwa dalam kebanyakan kasus Anda telah membuat semacam wadah luar eksklusif. Oleh karena itu sementara implementasi komentar mungkin lebih fleksibel (walaupun mungkin tambahan 1/2 baris kode yang ingin saya hindari jika memungkinkan), saya merasa itu mungkin kurang digunakan (dan mungkin harus kurang diprioritaskan) daripada direktif dalam elemen.

Masalah apakah akan menggunakan komentar HTML tidak ada hubungannya dengan fakta bahwa masalah ini telah beredar selama beberapa bulan. Saya pikir semua yang diperlukan adalah perhatian dari pengelola sudut untuk memutuskan masalah dan mengimplementasikan solusi.

Jika Anda melewatkannya, lihat di sini https://github.com/angular/angular.js/pull/1646 mengenai masalah dengan repeater berbasis komentar. Solusi @lgalfaso jauh lebih menjanjikan saat ini.

Terima kasih telah menunjukkan #1646 . Ada komentar dalam diskusi itu oleh @mhevery yang mengusulkan "cara yang lebih baik untuk melakukannya" tanpa menunjukkan kode apa pun (mungkin kesalahan pemformatan):

Saya berharap kita tahu apa itu "cara yang lebih baik"!

Konsensus dalam tim inti adalah bahwa saat ini cara terbaik untuk mendekati masalah ini adalah salah satu dari berikut ini (kami belum menetapkan sintaks tetapi implementasinya hampir sama untuk semua ini):

semua contoh ini berisi dua tag td , saya melakukan ini dengan sengaja meskipun itu ilegal karena saya ingin menunjukkan bahwa pengulang harus mengizinkan pengulangan sejumlah elemen yang berubah-ubah - akan lebih baik untuk mengonversi contoh ini untuk menggunakan tabel dan baris tabel, tetapi saya akan offline sekarang dan tidak punya waktu untuk memperbaikinya.

Sintaks A:

<dl>
  <dt ng-repeat="(name, definition) in myList">{{name}}</dt>
  <dd ng-repeat-next>{{definition}}</dd>
  <dd ng-repeat-next>{{definition}}</dd>
</dl>

Sintaks B:

<dl>
  <dt ng-repeat-start="(name, definition) in myList">{{name}}</dt>
  <dd>{{definition}}</dd>
  <dd ng-repeat-end>{{definition}}</dd>
</dl>

Sintaks C:

<dl>
  <dt ng-repeat="(name, definition) in myList" ng-repeat-start>{{name}}</dt>
  <dd>{{definition}}</dd>
  <dd ng-repeat-end>{{definition}}</dd>
</dl>

Sintaks D:

<dl>
  <dt ng-repeat="(name, definition) in myList" ng-repeat-group>{{name}}</dt>
  <dd ng-repeat-group>{{definition}}</dd>
  <dd ng-repeat-group>{{definition}}</dd>
</dl>

Jangka panjang, setelah kami memiliki dukungan browser yang lebih baik, kami akan mulai menggunakan elemen <template> yang akan memungkinkan kami melakukan hal ini:

Sintaks X:

<template>
  <dl>
    <ng repeat="(name, definition) in myList">
      <dt>{{name}}</dt>
      <dd>{{definition}}</dd>
      <dd>{{definition}}</dd>
    </ng>
  </dl>
</template>

jika ada yang ingin membuat PR untuk solusi ini, itu akan digabungkan. Juga jika Anda memiliki preferensi untuk sintaks tertentu, silakan berbicara.

Terima kasih atas masukannya. Dari sudut pandang saya, sintaks A tidak jelas untuk loop bersarang seperti berikut:

<dl>
  <dt ng-repeat="...">loop 1</dt>
  <dt ng-repeat="..." ng-repeat-next>loop 2</dt>
  <dd ng-repeat-next>is this within loop 2 or only loop 1</dd>
</dl>

Sintaks B dan C hampir sama, saya suka kedua alternatif (bahkan ketika saya pikir sintaks B entah bagaimana lebih baik)

Kecuali saya melewatkan sesuatu, sintaks D memiliki masalah loop bersarang yang sama dengan sintaks A

Saya akan memilih B jika memungkinkan, murni karena harus menulis paling sedikit huruf. Itu juga terlihat paling simetris - saya merasa ini akan lebih mudah diatur karena simetri visualnya.

Komentar lgalfasos menunjukkan dilema yang menarik. Bagaimana jika loop bersarang dalam contohnya ada di elemen pertama, bukan yang kedua. Maka semua versi Sintaks sekarang tidak jelas, kecuali saya melewatkan sesuatu.

Saya tidak begitu mengerti perbedaan antara ng-repeat-inner diusulkan @lgalfaso dan ng repeat dalam Sintaks X, meskipun pembungkus <template> . Bisakah seseorang menjelaskan?

Saya juga tidak yakin saya memahaminya, tetapi saya kira tag <ng> tidak menjadi bagian dari DOM, sehingga menghindari struktur bersarang ilegal di bawah dl .

Adapun sintaks yang diusulkan, saya akan memilih B.

Saya percaya kasus sintaks X memungkinkan untuk elemen pembungkus dummy generik <ng> yang bukan bagian dari DOM dan dapat meng-host berbagai arahan. Ini lebih umum daripada ng-repeat-inner , yang hanya berlaku untuk kasus penggunaan khusus untuk ng-repeat .

Jika sintaks X, tujuan jangka panjang, hanyalah versi yang lebih umum dari ng-repeat-inner , saya merasa bahwa ng-repeat-inner juga harus (*tidak hanya) diadopsi di sepanjang salah satu A,B yang diusulkan, C,D untuk hal-hal berikut:

1. kedua sintaks X dan ng-repeat-inner memiliki struktur dom yang sama
   : jika sintaks X adalah tujuan jangka panjang, alangkah baiknya memiliki sesuatu sekarang yang menyelaraskan struktur-bijaksana dengannya untuk mencegah refactoring di masa mendatang.
2. dalam kebanyakan kasus, ng-repeat-inner sudah cukup
   : maksudnya adalah membuat wadah luar untuk mengulang elemen dalam.

@daegon123 perbedaan antara salah satu sintaks @IgorMinar yang terdaftar (termasuk X) dan ng-repeat-inner adalah bahwa sintaks memungkinkan Anda secara sewenang-wenang mengulangi satu set elemen tanpa wadah yang berbeda. Misalnya, ulangi satu set <tr> s sementara ada <tr> s lain yang tidak berulang dalam table atau tbody . Dalam hal ini, elemen yang akan diulang tidak memiliki induk yang berbeda untuk mengikat ng-repeat-inner .

<table>
    <thead>...</thead>
    <tr ng-repeat-start="(name, definition) in myList">...</tr>
    <tr>...</tr>
    <tr ng-repeat-end>...</tr>
    <tr>...</tr>
    <tfoot>...</tfoot>
</table>

Atau beberapa definisi per objek dalam <dl>

<dl>
    <dt ng-repeat-start="...">{{item.term1}}</dt>
    <dd>{{item.def1}}</dd>
    <dt>{{item.term2}}</dt>
    <dd>{{item.def2}}</dd>
    <dt>{{item.term3}}</dt>
    <dd ng-repeat-end>{{item.def3}}</dd>
</dl>

@es128 Terima kasih atas komentar dan kodenya. Itulah alasan mengapa saya mengusulkan agar ng-repeat-inner diterima 'bersama' dengan salah satu sintaks lain yang terdaftar, tetapi melihat kode aktual dalam komentar Anda mulai membuat saya bertanya-tanya apakah ng-repeat-inner diperlukan. Saya akan memposting komentar lain jika saya menemukan sesuatu - terima kasih lagi!

Masalah dengan ng-repeat-inner adalah tidak dapat digunakan untuk semua kasus, misalnya:

<ul>
  <li>some static prefix item</li>
  <!-- repeat these nodes -->
    <li>{{ something }}</li>
    <li>{{ something else }}</li>
  <!-- repeat end -->
  <li>some static postfix item</li>
</ul>

karena Anda tidak dapat memasukkan elemen buatan (seperti div) ke dalam ul (per spesifikasi html), ng-repeat-inner tidak dapat digunakan di sini.

btw dengan elemen template, kita akan dapat menempatkan elemen buatan di antara ul dan li.

Juga jangan terlalu terikat dengan sintaks X, itu hanya contoh cepat dan kotor tentang apa yang akhirnya dapat kita lakukan sintaks yang tepat belum dibahas, tetapi sementara saya melakukannya, ini yang lain satu:

Sintaks Y:

<ul>
  <li>some static prefix item</li>
  <template repeat="item in items">
    <li>{{ item.name }}</li>
    <li>{{ item.owner }}</li>
  </template>
  <li>some static postfix item</li>
</ul>

Bagaimana dengan menyetel id ke grup ng-repeat ?
Kemudian kita dapat dengan bebas melampirkan item dari level mana pun. Sesuatu seperti

<dl>
    <dt ng-repeat="item in items" ng-repeat-group="someId">{{item.term}}</dt>
    <dd ng-repeat-with="someId">{{item.definition}}</dd>
</dl>

bisa memungkinkan fleksibilitas yang kita butuhkan.

Usulan implementasi sintaks C, ternyata menurut saya ini adalah sintaks yang memungkinkan mekanisme yang sama ini menjadi mudah untuk elemen dan arahan lainnya

Kerja bagus Lucas! Saya telah menghabiskan malam mencoba untuk mengimplementasikan sintaks C. Ini bekerja dengan benar, tetapi bersarang tidak didukung karena transklusi mengubah semua ng-repeat s menjadi komentar.

Jika saya tidak dapat melintasi DOM mencari ng-repeat-start , saya tidak dapat menghitung kedalaman atribut ng-repeat-end untuk pencocokan. Pendekatan Anda tampaknya menyelesaikan masalah ...

Hmm... sepertinya ada yang salah. Dokumen tidak ada di komit Anda, jadi mungkin saya tidak menggunakan sintaks yang benar.

Lihat ini:
http://plnkr.co/edit/sVilxKaNrhNM4JrkuQ5r?p=preview

Saya mengharapkan output untuk kasus non-bersarang menjadi:

Term: elastic
     Static term
     This definition should be repeated for every term: 'elastic' term
Term: par
     Static term
     This definition should be repeated for every term: 'par' term

Dan untuk yang bersarang:

Term: elastic
     Static term
Subterm: superelastic
     Static subterm
     This should be repeater for every subterm: 'super' subterm from 'elastic' term
Subterm: subelastic
     Static subterm
     This should be repeater for every subterm: 'sub' subterm from 'elastic' term
     This definition should be repeated for every term: 'elastic' term
Term: par
     Static term
Subterm: superpar
     Static subterm
     This should be repeater for every subterm: 'super' subterm from 'par' term
Subterm: subpar
     Static subterm
     This should be repeater for every subterm: 'sub' subterm from 'par' term
     This definition should be repeated for every term: 'par' term

Aku aku kehilangan sesuatu?

@lrlopez Contoh yang Anda masukkan tidak menggunakan kode versi terbaru. Juga, ada tambahan </dl> di baris 23

Terima kasih atas balasan cepatnya! Anda benar, ada tambahan </dl> pada baris 23. Saya juga memperbarui perpustakaan. Namun demikian, saya masih belum bisa mengerjakan contoh bersarang ...

Oke, sepertinya ini adalah masalah nyata dengan arahan multi-elemen yang berada pada level yang sama di DOM. Memperbarui PR dengan perbaikan untuk masalah ini

Perbaikan seperti ng-repeat-inner atau ng-repeat-next hanya menyelesaikan satu dari banyak situasi di mana perilaku mengikat ke node DOM yang sebenarnya akan membatasi Anda.

Alih-alih menambal setiap arahan secara individual, Anda dapat menyelesaikan ini untuk seluruh kerangka kerja dengan menambahkan dukungan untuk node virtual yang tidak dirender di pohon yang sebenarnya.

Gagasan menggunakan komentar serupa, tetapi menghasilkan kode yang tidak enak dilihat, sulit dibaca dan Anda masih memerlukan cara untuk memberi nama simpul itu dan menutupnya entah bagaimana. Alih-alih menciptakan sintaks node komentar baru, gunakan sintaks HTML yang ada.

Anggap saja sebagai konsep yang mirip dengan, katakanlah, kelas diam SASS:

<div id="myComplexList">
    <ng-virtual ng-repeat="...">
        <a></a>
        <b></b>
        <c></c>
    </ng-virtual>
</div>

Result:

<div id="myComplexList">
    <a></a>
    <b></b>
    <c></c>
    <a></a>
    <b></b>
    <c></c>
    <a></a>
    <b></b>
    <c></c>
    ...
</div>

Memberi +1 pada ide umum tetapi saya akan memilih sesuatu seperti ng-repeat-group.

<ng-repeat-group="b in ches">
// group markup to be repeated here
</ng-repeat-group>

Saya suka ide node virtual, tapi saya menentangnya menjadi solusi umum untuk masalah di sini.

Jika memungkinkan, saya ingin membatasi pembuatan wadah buatan apa pun. Meskipun penampung mungkin tidak muncul di html dari hasil keseluruhan, penampung itu akan mulai mengacaukan kode html yang perlu dikelola.

Dalam banyak kasus, kita akan membutuhkan beberapa wadah untuk menampung apa yang ingin kita ulangi. mantan:

<tr>
  <td ng-repeat-start>1</td>
  <td ng-repeat-end>2</td>
</tr>

(wadah di sini adalah [tr]s)

menggunakan solusi simpul virtual yang diusulkan akan mengubah ini menjadi:

<tr>
  <ng-virtual ng-repeat="...">
     <td>1</td>
     <td>2</td>
  </ng-virtual>
</tr>

membuat wadah yang berlebihan: bahkan penambahan dua baris ini membuat saya merasa tidak nyaman memikirkan bagaimana jadinya jika kodenya menjadi lebih panjang.

Masalah lain adalah bahwa itu akan mulai membosankan ketika mencoba memahami tingkat dom kode saat ini.
Ini sedikit kode dari @es128

<table>
<thead>...</thead>
    <tr ng-repeat-start="(name, definition) in myList">...</tr>
    <tr>...</tr>
    <tr ng-repeat-end>...</tr>
    <tr>...</tr>
    <tfoot>...</tfoot>
</table>

menggunakan node virtual mengubah ini menjadi:

<table>
<thead>...</thead>
    <ng-virtual ng-repeat="...">
        <tr">...</tr>
        <tr>...</tr>
        <tr>...</tr>
    </ng-virtual>
    <tr>...</tr>
    <tfoot>...</tfoot>
</table>

Pengulangan dari 3 tr pertama dan tr terakhir berada pada level yang sama, tetapi jika saya hanya membaca sekilas kode, ada kemungkinan saya akan salah mengira mereka sebagai level yang berbeda, atau saya akan mulai menemukan diri saya sendiri menghitung dengan susah payah (mungkin salah) pada level apa kode tersebut bekerja, terutama jika hal-hal ini mulai bersarang.

Berikut adalah versi sintaks tertentu yang saya suka (dari jenis B):

<ul>
  <li>some static prefix item</li>
  <li ng-repeat-block="(name, definition) in myList">{{ something }}</li>
  <li>{{ something else }}</li>
  <li ng-repeat-block-close>{{ something else }}</li>
  <li>some static postfix item</li>
</ul>

@stanvass proposal Anda adalah variasi dari apa yang diposting @IgorMinar sebagai sintaks X, masalah utamanya adalah dukungan browser tidak ada di sana

Saya baru menyadari bahwa memiliki ng-repeat-start dan ng-repeat-end adalah mubazir jika Anda hanya ingin mengulang satu elemen dalam.

<tr>
  <td ng-repeat-start ng-repeat-end>repeat this</td>
</tr>

Alangkah baiknya jika kita juga bisa memiliki ng-repeat-single yang akan mencegah hal ini. mantan.

<tr>
  <td ng-repeat-single>repeat this</td>
</tr>

@daegon123 jika Anda ingin mengulang satu elemen, lakukan saja

<tr>
  <td ng-repeat="...">repeat this</td>
</tr>

Tidak perlu ng-repeat-start atau ng- repeat-end

@lgalfaso Terima kasih, sepertinya saya terjebak dalam sintaks yang diusulkan sehingga saya lupa apa yang sudah kita miliki. Semoga kita segera menyadari ng-repeat-start/end.

Saya pikir masalah ini bukan hanya tentang mengulang satu elemen. Ini lebih tentang bagaimana mengulang satu set elemen tanpa mengulangi induknya. yaitu <dt>..<dd>... - tetapi ada banyak contoh bagus lainnya di sini.

Sintaks X adalah satu-satunya yang terdefinisi dengan baik setelah Anda memulai pengulangan bersarang. Bagaimana Anda menulis yang berikut ini di Syntax AD:

<template>
  <dl>
    <ng repeat="book in myList">
      <dt ng-repeat="author in book.authors">{{author.name}}</dt>
      <dd>{{book.title}}</dd>
      <dd>{{book.description}}</dd>
    </ng>
  </dl>
</template>

Itu adalah saran yang lebih baik.
Dikirim dari My Blackberry®

-----Pesan asli-----
Dari: daegon123 [email protected]
Tanggal: Sen, 06 Mei 2013 22:57:16
Kepada: angular/angular.jsangular. [email protected]
Balas-Ke: "angular/angular.js" [email protected]
Subjek: Re: [angular.js] ngRepeat dengan DL / DD / DT (#1891)

Saya baru menyadari bahwa memiliki ng-repeat-start dan ng-repeat-end adalah mubazir jika Anda hanya ingin mengulang satu elemen dalam.

<tr>
  <td ng-repeat-start ng-repeat-end>repeat this</td>
</tr>

Alangkah baiknya jika kita juga bisa memiliki ng-repeat-single yang akan mencegah hal ini. mantan.

<tr>
  <td ng-repeat-single>repeat this</td>
</tr>

Balas email ini secara langsung atau lihat di GitHub:
https://github.com/angular/angular.js/issues/1891#issuecomment -17524685

+1, ini adalah batasan besar.

:+1: berharap dapat melihat solusi untuk ini! Saya akan menggunakan <li> untuk saat ini, tetapi ingin memperbaiki markup itu ketika angular keluar dengan solusi untuk ini =)

Akankah #2783 menyelesaikan ini?

Ya. Kami memiliki solusi yang baru saja mendarat: e46100f7097d9a8f174bdb9e15d4c6098395c3f2

Saya menutup masalah ini.

Saya mendapat kesalahan: <TypeError: Object #<Text> has no method 'hasAttribute'> dalam contoh sederhana ini:

<table>
        <tr ng-repeat-start="value in [1,2,3,4]">I get repeated</tr>
        <tr ng-repeat-end>I also get repeated</tr>
    </table>

Juga mendapatkan masalah sebagai status gevgeny.
tidak memiliki metode 'hasAttribute'>

<tr>
                <td data-ng-repeat-start="column in selectedItem.Beds" class="text-center">Avail. Beds</td>
                <td data-ng-repeat-end>Extra Bed Spaces</td>
</tr>

@kharnt0x lihat permintaan puul ini https://github.com/angular/angular.js/pull/2859

Bagaimana #2783 menyelesaikan ini:

{[{h: "1",
   o: [{h: "1.1",
        o: [{h: "1.1.1"},
            {h: "1.1.2"},
            {h: "1.1.3"}]},
       {h: "1.2",
        o: [{h: "1.2.1"},
            {h: "1.2.2"},
            {h: "1.2.3"}]},

....

Itu perlu menampilkan sesuatu seperti ini:

<h1>1</h1>
<h2>1.1</h2>
<h3>1.1.1</h3>
<h3>1.1.2</h3>
<h3>1.1.3</h3>
<h2>1.2</h2>
<h3>1.2.1</h3>
<h3>1.2.2</h3>
<h3>1.2.3</h3> 

Apa yang akan menjadi sintaks?

@ChrisCinelli Coba gunakan hgroup

<h1>1</h1>
<hgroup>
    <h2>1.1</h2>
        <hgroup>
            <h3>1.1.1</h3>
            <h3>1.1.2</h3>
            <h3>1.1.3</h3>
        <hgroup>
    <h2>1.2</h2>
        <hgroup>
            <h3>1.1.1</h3>
            <h3>1.1.2</h3>
            <h3>1.1.3</h3>
        <hgroup>
<hgroup>

Jadi hgroup tampaknya telah dihapus dari HTML5 ( http://html5doctor.com/the-hgroup-element/ ), selain itu, seperti yang saya katakan masalahnya lebih kompleks dan tag header digunakan hanya sebagai contoh.
Ini jelas merupakan kasus penggunaan yang harus diizinkan dan tidak merusak sama sekali filosofi pandangan deklaratif Angular...

Untuk keluaran spesifik yang Anda cari, sudahkah Anda mempertimbangkan CSS
Penghitung?

Lihat:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
http://css-tricks.com/almanac/properties/c/counter-increment/

Pada Tue, Jun 18, 2013 at 14:46, Chris Cinelli [email protected] :

Jadi hgroup tampaknya telah dihapus dari HTML5 (
http://html5doctor.com/the-hgroup-element/ ), selain itu, seperti saya
mengatakan masalahnya lebih kompleks dan tag header digunakan hanya untuk
contoh.
Ini jelas merupakan kasus penggunaan yang harus diizinkan dan tidak rusak
semua pandangan deklaratif filosofi Angular...

—
Balas email ini secara langsung atau lihat di Gi tHubhttps://github.com/angular/angular.js/issues/1891#issuecomment -19644594
.

Saya menggunakan header sebagai contoh untuk memperjelas... pada kenyataannya saya memiliki <div> relatif kompleks dengan struktur yang berbeda untuk setiap level dalam struktur data.

Satu-satunya solusi yang saya temukan sejauh ini adalah linierisasi struktur data dalam Javascript dan menggunakan ng-switch untuk level yang berbeda dan itu akan membutuhkan saya level div tambahan.
Solusi ini memiliki overhead (yaitu memori dan CPU untuk linierisasi struktur data) dan HTML akan terlihat jauh lebih jelas daripada template garis bawah yang dapat saya gunakan sebagai gantinya...

Bisakah Anda membuat arahan untuk setiap level? Saya tidak yakin jenis apa
struktur yang Anda bicarakan di sini, jadi saya hanya akan mencengkeram sedotan.
Tetapi menurut pengalaman saya, ng-switch hampir tidak pernah diperlukan ketika Anda memiliki
akses ke arahan dan ng-include, dan mengarah ke templat kode spageti.

Pada Selasa, 18 Juni 2013 pukul 16:27, Chris Cinelli [email protected] menulis :

Saya menggunakan tajuk sebagai contoh untuk memperjelas ... pada kenyataannya saya punya
div yang relatif kompleks dengan struktur yang berbeda untuk setiap level di
struktur datanya.

Satu-satunya solusi yang saya temukan sejauh ini adalah linierisasi pohon di
Javascript dan gunakan ng-switch untuk level yang berbeda.
Solusi ini memiliki overhead (yaitu memori dan CPU untuk linierisasi data
struktur) dan HTML akan terlihat jauh lebih jelas daripada
menggarisbawahi template yang saya dapat digunakan sebagai gantinya...

—
Balas email ini secara langsung atau lihat di Gi tHubhttps://github.com/angular/angular.js/issues/1891#issuecomment -19650391
.

Begini tampilannya: http://d.pr/i/GSX4
Cukup banyak label pendek (1.xx x), deskripsi, jumlah tanda centang, dll, berasal dari db.
Saya sedang menjajaki opsi untuk mengonversi bagian ini ke Angular tetapi sejauh ini tidak ada dadu.

Tampilan saat ini cukup kurang logis dan membuatnya relatif jelas tentang apa yang sedang terjadi.
Jika saya mengerti dengan baik, Anda cukup menyarankan untuk memecahkan setiap level dalam sepotong javascript.

Bagi saya ini terlihat lebih berantakan, kurang koesif dan kurang mudah dibaca. Mengingat struktur data yang memiliki semua info untuk menampilkan panel ini, mengapa saya perlu menggunakan kode dalam file yang berbeda (modul/pengontrol) ketika logika sepenuhnya terkait dengan tampilan dan sangat spesifik untuk tampilan ini? IMHO, pengontrolnya seharusnya (dan sekarang dalam implementasi saat ini):

• dapatkan data dari model
• meneruskan model ke tampilan sehingga kerangka kerja dapat merendernya

Tentu saya dapat menambahkan beberapa div tambahan dan mengubah CSS, tetapi jika ini diperlukan untuk membuatnya bekerja dengan Angular, rasanya Angular menghalangi cara yang nyaman dan elegan untuk menyelesaikan sesuatu di sini.

Saya menemukan pengikatan data di KnockoutJS, yang memungkinkan pengikatan ke elemen html <div data-bind="foreach: ..."> serta "sintaks aliran kontrol tanpa wadah", <!-- ko foreach: ... --><!-- /ko --> , menjadi sangat berguna, dan berpikir akan sangat bagus jika Angular dapat mendukung serangkaian opsi sintaks yang serupa, sangat mirip dengan sintaks yang disarankan @bowsersenior .

Untuk detail lebih lanjut tentang opsi "tanpa kontainer" Knockout:
http://knockoutjs.com/documentation/foreach-binding.html

+1 untuk sintaks virtual @ mg1075 .
KnockoutJS membuatnya lebih mudah untuk menangani koleksi dd dan bersarang.
misalnya http://stackoverflow.com/questions/20062032/nested-table-using-ng-repeat