Saya mempunyai json seperti berikut:
[
{"teacher":"Tom","student":[{"name":"stuA","project":"projectA"},{"name":"stuB","project":"projectB"}]},
{"teacher":"Jerry","student":[{"name":"stuC","project":"projectC"},{"name":"stuD","project":"projectD"},{"name":"stuE","project":"projectE"}]},
{"teacher":"Lee","student":[{"name":"stuF","project":"projectF"}]}
]
Sekarang saya mahu menjadikan data ini ke dalam jadual melalui ng-repeat Gambar yang dijangkakan adalah seperti berikut:
Tetapi saya menghadapi banyak kesukaran. Ini mungkin amalan ng-repeat yang paling menyusahkan yang pernah saya temui.
Dilampirkan kod html borang ini supaya semua orang dapat melihat dengan jelas struktur borang ini:
<tr style="height:40px" >
<td rowspan="2" style="text-align:center;background:#FFD4D4;font-weight:bold;">Tom</td>
<td style="text-align:center;font-size:15px;font-weight:bold;">stuA</td>
<td style="text-align:left;padding-left:100px;font-size:15px;font-weight:bold;">projectA</td>
</tr>
<tr style="height:40px;">
<td style="text-align:center;font-size:15px;font-weight:bold;">stuB</td>
<td style="text-align:left;padding-left:100px;font-size:15px;font-weight:bold;">projectB</td>
</tr>
<tr style="height:40px">
<td rowspan="3" style="text-align:center;background:#FFD4D4;font-weight:bold;">Jerry</td>
<td style="text-align:center;font-size:15px;font-weight:bold;">stuC</td>
<td style="text-align:left;padding-left:100px;font-size:15px;font-weight:bold;">projectC</td>
</tr>
<tr style="height:40px;">
<td style="text-align:center;font-size:15px;font-weight:bold;">stuD</td>
<td style="text-align:left;padding-left:100px;font-size:15px;font-weight:bold;">projectD</td>
</tr>
<tr style="height:40px;">
<td rowspan="1" style="text-align:center;background:#FFD4D4;font-weight:bold;">Lin</td>
<td style="text-align:center;font-size:15px;font-weight:bold;">stuE</td>
<td style="text-align:left;padding-left:100px;font-size:15px;font-weight:bold;">projectE</td>
</tr>
Masalah dengan gelung ini ialah guru menduduki beberapa baris secara eksklusif dan gelung mesti bersarang. Jadi saya meminta tuan untuk menggunakan otaknya untuk membantu saya berfikir tentang bagaimana untuk melaksanakan ng-repeat ini
Mengenai sama ada Guru perlu digabungkan, bolehkah ia dikawal dengan pembolehubah? Sebagai contoh, jika nombor lebih besar daripada 0, ia perlu digabungkan, dan jika nombor lebih besar daripada 0, ia bermakna bilangan baris yang akan digabungkan.
Kod:
Membuat pengubahsuaian kecil berdasarkan jawapan @chenmo:
Berikut ialah tangkapan skrin keputusan: