使用angularJS的3列的行跨度

Question

我有一个包含名称和主题列表的类别列表。 主题列表包含名称和课程列表。 课程列表包含名称。

我想在表中显示此数据，如果行相同，则将在行跨度类别或主题中显示。 例如：

Category  Subject  Course
cat1      sub1     ''
          sub2     cour1
                   cour2
          sub3     ''
cat3      ''

目前，我使用它为两列工作：

 <table  class="curvetable5" style="width:99%">
  <thead>
    <tr>
        <th width="30%">Category</th>
        <th width="30%">Subject</th>
    </tr>
   </thead>
   <tbody  ng-repeat="category in organization">    
       <td rowspan="{{category.subjectList.length+1}}">{{category.categoryName}}</td>    
       <tr  ng-repeat="subject in category.subjectList">         
            <td>{{ subject.name }}</td>
        </tr> 
    </tbody>
 </table>

但是，我在进行3列操作时遇到了麻烦。 这是我不起作用的代码。 没有显示课程名称，并且科目名称以列顺序而不是行顺序列出。 任何建议：

<table  class="curvetable5" style="width:99%">
  <thead>
    <tr>
        <th width="30%">Category</th>
        <th width="30%">Subject</th>
        <th width="40%">Course</th>
    </tr>
   </thead>
   <tbody  ng-repeat="category in organization">    
       <td rowspan="{{category.subjectList.length+1}}">{{category.categoryName}}</td>    
       <tr  ng-repeat="subject in category.subjectList">         
            <td rowspan="{{subject.courseList.length+1}}">{{ subject.name }}</td>
            <tr  ng-repeat="course in subject.courseList">       
                <td>{{ course.name }}</td>
            </tr> 
        </tr> 
    </tbody>
 </table>

样本数据：

[
 {"id":95,"categoryName":"A new catagory",
        "subjectList":[{"id":112,"subjectname":"2ndnewcat","curcount":0,
                "courseList":"[{\"name\":\"-\",\"curcount\":0}]"},
        {"id":76,"subjectname":"ZZZZZZZZZZZZZZZZZZ_class","curcount":0,
                "courseList":[{"coursename":"thiswillbenew111111111112","curcount":1}]}]},
 {"id":93,"categoryName":"David Test",
        "subjectList":[{"id":75,"subjectname":"This is a test","curcount":1,
                "courseList":[{"coursename":"newewst1","curcount":0}]}]},
 {"id":116,"categoryName":"New Category",
        "subjectList":[{"id":79,"subjectname":"New Subject","curcount":2,
                "courseList":[{"coursename":"ISO training part 2","curcount":0}]}]},
 {"id":0,"categoryName":"cat1",
        "subjectList":[{"id":15,"subjectname":"test","curcount":4,
                "courseList":"[{\"name\":\"-\",\"curcount\":0}]"}]},
 {"id":11,"categoryName":"cat2",
        "subjectList":[{"id":68,"subjectname":"asdasd","curcount":5,
                "courseList":[{"coursename":"david1","curcount":0},{"coursename":"thisisatest","curcount":0}]}]},
 {"id":12,"categoryName":"cate3",
        "subjectList":[{"id":12,"subjectname":"newest1","curcount":6,
                "courseList":[{"coursename":"cous1","curcount":0}]}]},
 {"id":163,"categoryName":"emptylist",
        "subjectList":"[{\"name\":\"-\",\"curcount\":0}]"}
 ]

这是我正在测试的当前代码。 它将对类别进行行跨度显示，一次显示每个主题，然后在单个单元格中显示列表中每个主题的所有课程。 我也喜欢行跨主题，但这是我到目前为止的工作。

<table  class="curvetable5" style="width:99%">
    <thead>
        <tr>
            <th width="30%">Category</th>
            <th width="30%">Subject</th>
            <th width="40%">Course</th>
        </tr>
    </thead>
    <tbody  ng-repeat="category in organization">
        <td rowspan="{{category.subjectList.length+1}}">{{category.categoryName}}</td>
        <tr  ng-repeat="subject in category.subjectList">        
            <td>{{ subject.subjectname }}</td>
            <td> <li ng-repeat="course in subject.courseList" >{{ course.coursename }} </li></td>
        </tr>
        <td ng-if="category.subjectList.length==27">&nbsp;</td>
        <td ng-if="category.subjectList.length==27">&nbsp;</td>
    </tbody>
</table>

谢谢，AB

Answer 1

两栏的情况应为：

<tbody ng-repeat="dept in org.deptList">
    <tr ng-repeat="subj in dept.subjList">
       <td rowspan="dept.subjList.length+1">
          {{dept.name}}
       </td>
       <td>
           {{subj.name}}
       </td>
    </tr>
</tbody>

对于三列情况，将<table>嵌套在<td>元素中：

<tbody ng-repeat="dept in org.deptList">
    <tr ng-repeat="subj in dept.subjList">
       <td rowspan="dept.subjList.length+1">
          {{dept.name}}
       </td>
       <td>
          <table>
             <tr ng-repeat="class in subj.classList">
                 <td rowspan="subj.classList.length+1">
                    {{subj.name}}
                 </td>
                 <td>
                    {{class.name}}
                 </td>
             </tr>
          </table>
       </td>
    </tr>
</tbody>