A number of university groups have utilized my HTML table applications.
Each university may have various groups, with each group currently consisting of only one student.
The HTML code I am working with includes AngularJS as shown below:
<table>
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>State</th>
<th>Group Name</th>
<th>University</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="application in $ctrl.applications track by application.id"
<td>
<div ng-repeat="student in ::application.students track by $index">
{{:: student.name }}
</div>
</td>
<td>
<div ng-repeat="student in ::application.students track by $index">
{{:: student.address }}
</div>
</td>
<td>
<div ng-repeat="student in ::application.students track by $index">
{{:: customer.state }}
</div>
</td>
<td>{{:: application.groupName}}</td>
<td>{{:: application.university }}</td>
</tr>
</tbody>
</table>
The current output can be seen here: https://i.sstatic.net/DQulV.png
There has been a change in the requirements.
Now each group may consist of multiple students, each with their own address and state.
The new table structure should resemble this: https://i.sstatic.net/GYvra.png
However, when passing modified data with multiple students in a single application, the layout doesn't align as expected: https://i.sstatic.net/BhDN2.png
Any assistance provided would be greatly appreciated. Thank you for your help.
Edit:
I forgot to mention one crucial detail.
The entire row is clickable.
Hence, in the second image (the desired outcome), I should be able to click on both Alex and Steve simultaneously, treating them as a single item in the table.