ng-repeat HTML table 使用嵌套 json 中的 colspan 和 rowspan

Question

我正在尝试实现图像中附加的 table 结构： Composite Class Routine

到目前为止，我所尝试的可以在以下 Plunker 中看到：

https://plnkr.co/edit/4WiWKDIM2bNfnmRjFo91?p=preview

我的 json 数据是：

$scope.routines = [
    {
        "WEEKDAY_ID": 1,
        "WEEKDAY": "Sunday",
        "aSemester": [
            {
                "SEMESTER_ID": 1,
                "SEMESTER_NAME": "1st",
                "aClassTime": [
                    {
                        "COURSE_ID": 1,
                        "COURSE_CODE": "CSTE-1001",
                        "CLASS_DURATION": 3,
                        "CLASSTIME_ID": 1,
                        "CLASSTIME": "9.00-9.50",
                        "DEPT_ID": 1,
                        "DEPT_NAME": "Computer Science",
                        "BUILDING_NAME": "Academic-1",
                        "ROOM_NO": 101,
                        "LAB_GROUP": null,
                        "INSTRUCTOR_ID": 10,
                        "INSTRUCTOR_NAME": "Abhijit Chakraborty",
                        "SHORT_CODE": "AC"
                    },
                    {
                        "COURSE_ID": 7,
                        "COURSE_CODE": "CSTE-1106",
                        "CLASS_DURATION": 1,
                        "CLASSTIME_ID": 4,
                        "CLASSTIME": "12.00-12.50",
                        "DEPT_ID": 1,
                        "DEPT_NAME": "Computer Science",
                        "BUILDING_NAME": "Academic-2",
                        "ROOM_NO": 258,
                        "LAB_GROUP": null,
                        "INSTRUCTOR_ID": 10,
                        "INSTRUCTOR_NAME": "Abhijit Chakraborty",
                        "SHORT_CODE": "AC"
                    },
                    {
                        "COURSE_ID": 3,
                        "COURSE_CODE": "CSTE-1102",
                        "CLASS_DURATION": 1,
                        "CLASSTIME_ID": 7,
                        "CLASSTIME": "4.00-4.50",
                        "DEPT_ID": 1,
                        "DEPT_NAME": "Computer Science",
                        "BUILDING_NAME": "Academic-2",
                        "ROOM_NO": 252,
                        "LAB_GROUP": null,
                        "INSTRUCTOR_ID": 9,
                        "INSTRUCTOR_NAME": "Dr. Md. Asadun Nabi",
                        "SHORT_CODE": "MAN"
                    }
                ]
            },
            {
                "SEMESTER_ID": 2,
                "SEMESTER_NAME": "2nd",
                "aClassTime": [
                    {
                        "COURSE_ID": 7,
                        "COURSE_CODE": "CSTE-1106",
                        "CLASS_DURATION": 1,
                        "CLASSTIME_ID": 1,
                        "CLASSTIME": "9.00-9.50",
                        "DEPT_ID": 1,
                        "DEPT_NAME": "Computer Science",
                        "BUILDING_NAME": "Academic-4",
                        "ROOM_NO": 456,
                        "LAB_GROUP": null,
                        "INSTRUCTOR_ID": 6,
                        "INSTRUCTOR_NAME": "Dr. Humayun Kabir",
                        "SHORT_CODE": "HK"
                    },
                    {
                        "COURSE_ID": 3,
                        "COURSE_CODE": "CSTE-1102",
                        "CLASS_DURATION": 1,
                        "CLASSTIME_ID": 2,
                        "CLASSTIME": "10.00-10.50",
                        "DEPT_ID": 1,
                        "DEPT_NAME": "Computer Science",
                        "BUILDING_NAME": "Academic-1",
                        "ROOM_NO": 102,
                        "LAB_GROUP": null,
                        "INSTRUCTOR_ID": 6,
                        "INSTRUCTOR_NAME": "Dr. Humayun Kabir",
                        "SHORT_CODE": "HK"
                    }
                ]
            },
            {
                "SEMESTER_ID": 3,
                "SEMESTER_NAME": "3rd",
                "aClassTime": [
                    {
                        "COURSE_ID": 5,
                        "COURSE_CODE": "CSTE-4202",
                        "CLASS_DURATION": 1,
                        "CLASSTIME_ID": 7,
                        "CLASSTIME": "4.00-4.50",
                        "DEPT_ID": 1,
                        "DEPT_NAME": "Computer Science",
                        "BUILDING_NAME": "Academic-2",
                        "ROOM_NO": 252,
                        "LAB_GROUP": null,
                        "INSTRUCTOR_ID": 7,
                        "INSTRUCTOR_NAME": "Md. Javed Hossain",
                        "SHORT_CODE": "MJH"
                    }
                ]
            },
            {
                "SEMESTER_ID": 4,
                "SEMESTER_NAME": "4th",
                "aClassTime": [
                    {
                        "COURSE_ID": 61,
                        "COURSE_CODE": "CSTE-2204",
                        "CLASS_DURATION": 2,
                        "CLASSTIME_ID": 1,
                        "CLASSTIME": "9.00-9.50",
                        "DEPT_ID": 1,
                        "DEPT_NAME": "Computer Science",
                        "BUILDING_NAME": "Academic-1",
                        "ROOM_NO": 404,
                        "LAB_GROUP": null,
                        "INSTRUCTOR_ID": 6,
                        "INSTRUCTOR_NAME": "Dr. Humayun Kabir",
                        "SHORT_CODE": "HK"
                    },
                    {
                        "COURSE_ID": 62,
                        "COURSE_CODE": "CSTE-2206",
                        "CLASS_DURATION": 2,
                        "CLASSTIME_ID": 3,
                        "CLASSTIME": "11.00-11.50",
                        "DEPT_ID": 1,
                        "DEPT_NAME": "Computer Science",
                        "BUILDING_NAME": "Academic-1",
                        "ROOM_NO": 101,
                        "LAB_GROUP": null,
                        "INSTRUCTOR_ID": 10,
                        "INSTRUCTOR_NAME": "Abhijit Chakraborty",
                        "SHORT_CODE": "AC"
                    },
                    {
                        "COURSE_ID": 63,
                        "COURSE_CODE": "CSTE-2202",
                        "CLASS_DURATION": 3,
                        "CLASSTIME_ID": 5,
                        "CLASSTIME": "2.00-2.50",
                        "DEPT_ID": 1,
                        "DEPT_NAME": "Computer Science",
                        "BUILDING_NAME": "Academic-3",
                        "ROOM_NO": 303,
                        "LAB_GROUP": null,
                        "INSTRUCTOR_ID": 7,
                        "INSTRUCTOR_NAME": "Md. Javed Hossain",
                        "SHORT_CODE": "MJH"
                    }
                ]
            }
        ]
    }
];

和html我到目前为止试过的是：

<table id="routines" class="table table-bordered table-responsive table-condensed">
<thead>
  <tr>
    <th>Day</th>
    <th>Semester</th>
    <th ng-repeat="c in classtimes">{{c.CLASSTIME}}</th>
  </tr>
</thead>

<tbody ng-repeat="r in routines">
   <tr ng-repeat="s in r.aSemester">
     <td rowspan="{{r.aSemester.length}}">{{r.WEEKDAY}}</td>
     <td>{{s.SEMESTER_NAME}}</td>
     <td colspan={{c.CLASS_DURATION}} 
         ng-repeat="c in s.aClassTime">
        {{c.COURSE_CODE}}
      </td>
   </tr>
</tbody>

如有任何帮助，我们将不胜感激。

Answer 1

用这个

替换你的tablebody

<tbody>
  <tr ng-repeat-start="r in routines">
    <td rowspan="{{r.aSemester.length+1}}">{{r.WEEKDAY}}</td>

  </tr>
  <tr ng-repeat="aSem in r.aSemester">
    <td>{{aSem.SEMESTER_NAME}}</td>
    <td ng-repeat="c in classtimes">
      <span ng-repeat="classTime in aSem.aClassTime">
        <span ng-if="classTime.CLASSTIME_ID==c.CLASSTIME_ID">
          {{classTime.COURSE_CODE}}
        </span>
      </span>
      </td>
  </tr>
  <tr ng-repeat-end ></tr>
</tbody>

我认为这应该有所帮助。

Plunkr https://plnkr.co/edit/QFUouMmSKtBiAWMdGpCC?p=preview

ng-repeat HTML table 使用嵌套 json 中的 colspan 和 rowspan

ng-repeat HTML table with colspan and rowspan from nested json

html

css

angularjs

json

ng-repeat