angular.js - Saya menghadapi masalah menggunakan ng-repeat untuk menggelungkan jadual yang tidak teratur
天蓬老师
天蓬老师 2017-05-15 16:53:03
0
3
833

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

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

membalas semua(3)
習慣沉默

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:

<table class="table table-bordered">
    <thead>
        <tr>
            <th>teacher</th>
            <th>student</th>
            <th>project</th>
        </tr>
    </thead>
    <tbody ng-repeat="teacher in teachers">
        <tr ng-repeat="student in teacher.student track by $index">
            <td ng-if="$index ==0" rowspan="{{teacher.student.length}}">
                <span ng-bind="student.name"></span>
            </td>
            <td><span ng-bind="student.project"></span>
            </td>
        </tr>
    </tbody>
</table>
过去多啦不再A梦

Membuat pengubahsuaian kecil berdasarkan jawapan @chenmo:

<table class="table table-bordered">
    <thead>
        <tr>
            <th>teacher</th>
            <th>student</th>
            <th>project</th>
        </tr>
    </thead>
    <tbody ng-repeat="teacher in vm.teachers">
        <tr ng-repeat="student in teacher.student track by $index">
            <td ng-if="$index ==0" rowspan={{teacher.student.length}}>{{teacher.name}}</td>
            <td>
                <span ng-bind="student.name"></span>
            </td>
            <td><span ng-bind="student.project"></span>
            </td>
        </tr>
    </tbody>
</table>

Berikut ialah tangkapan skrin keputusan:

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan