ряд строк для 3 столбцов с помощью angularJS - PullRequest
Новая
       10

ряд строк для 3 столбцов с помощью angularJS

0 голосов
/ 30 мая 2018

У меня есть список категорий, который содержит имя и список тем.Список тем содержит имя и список курсов.Список курсов содержит имя.

Я хочу отобразить эти данные в таблице, которая будет отображать категорию или тему строки, если они совпадают.Например: 

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

Это текущий код, который я тестирую.Он будет пролистывать категорию, отображать каждый предмет один раз, а затем отображать все курсы для каждого предмета в списке в одной ячейке.Я бы тоже предпочел тему «rowspan», но это то, что я получил до сих пор.

<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

1 Ответ

0 голосов
/ 31 мая 2018

Случай с двумя столбцами должен быть: 

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