I'm working on creating a table layout shown in the attached image: Composite Class Routine
Check out my progress so far in this Plunker demo:
https://plnkr.co/edit/4WiWKDIM2bNfnmRjFo91?p=preview
The JSON data I'm using is as follows:
$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"
},
...
]
},
...
]
}
];
Here's the HTML structure I've been experimenting with:
<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>
Please feel free to provide any guidance or feedback. Thank you!