찾다

 >  Q&A  >  본문

angular.js - 用ng-repeat循环出一个不规则的表格遇到了问题

我有一条json如下:

[
{"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"}]}
]

现在我想把这些数据通过ng-repeat渲染进一个表格中,预想图如下:

但是遇到了很多的困难,这估计是遇过的最麻烦的ng-repeat的实践.
附上这个表格的html代码,方便大家清楚地看到这个表格的结构:

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

这个循环的问题在于,teacher是独占几行的,而且还得嵌套循环。所以请求大神发动一下脑筋帮我想想这个ng-repeat具体该如何实现

天蓬老师天蓬老师2744일 전814

모든 응답(3)나는 대답할 것이다

  • 習慣沉默

    習慣沉默2017-05-15 16:55:03

    Teacher를 병합해야 하는지 여부를 변수로 제어할 수 있나요? 예를 들어 숫자가 0보다 크면 병합해야 하고, 숫자가 0보다 크면 병합할 행 수를 의미합니다.

    회신하다
    0
  • 为情所困

    为情所困2017-05-15 16:55:03

    코드:

    으아악

    회신하다
    0
  • 过去多啦不再A梦

    过去多啦不再A梦2017-05-15 16:55:03

    @陈波의 답변을 바탕으로 약간 수정했습니다:

    으아악

    다음은 결과 스크린샷입니다.

    회신하다
    0
  • 취소회신하다