Question

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

我想在表格中显示这些数据，如果它们是相同的，则会显示在rowspan类别或主题中。例如：

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

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

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

使用angularJS的3列行距

1 个答案: