How to create different section in angular template (html file) conditionally - html

Question

I am constructing three different table as following.
There is a lot of repetitive code in it.
The only different in each table is studentPermissions[] array which contain three objects for each student. So under each table i am just changing it for each student like studentPermissions[0], studentPermissions[1] and studentPermissions[2].
Is there any further better i can write same code in less no of lines?
<div class="module-container">
<div>
<table>
<thead>
<tr >
<td>Student</td>
<td>{{studentPermissions[0].SubjectName}}</td>
</tr>
<tr>
<th></th>
<th ng-repeat="permission in permissions"><div><span>{{permission.Name}}</span></div></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in studentPermissions[0].Students">
<td>{{student.FirstName}} {{student.LastName}} <small class="" style="color: #999999;">({{student.Role}})</small></td>
<td ng-repeat="permission in student.Permissions">
<input ng-model="permission.Checked" type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr >
<td>Student</td>
<td>{{studentPermissions[1].SubjectName}}</td>
</tr>
<tr>
<th></th>
<th ng-repeat="permission in permissions"><div><span>{{permission.Name}}</span></div></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in studentPermissions[1].Students">
<td>{{student.FirstName}} {{student.LastName}} <small class="" style="color: #999999;">({{student.Role}})</small></td>
<td ng-repeat="permission in student.Permissions">
<input ng-model="permission.Checked" type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr >
<td>Student</td>
<td>{{studentPermissions[2].SubjectName}}</td>
</tr>
<tr>
<th></th>
<th ng-repeat="permission in permissions"><div><span>{{permission.Name}}</span></div></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in studentPermissions[2].Students">
<td>{{student.FirstName}} {{student.LastName}} <small class="" style="color: #999999;">({{student.Role}})</small></td>
<td ng-repeat="permission in student.Permissions">
<input ng-model="permission.Checked" type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
</div>
I was not sure about question title so please feel free to update it to make it more relevant with question contents. thanks
Also, I have to show data for each customer in septate table. this is requirement

Answer 1

Why not just use another ng-repeat?
<div class="module-container">
<div ng-repeat="studentPermission in studentPermissions">
<table>
<thead>
<tr >
<td>Student</td>
<td>{{studentPermission.SubjectName}}</td>
</tr>
<tr>
<th></th>
<th ng-repeat="permission in permissions"><div><span>{{permission.Name}}</span></div></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in studentPermission.Students">
<td>{{student.FirstName}} {{student.LastName}} <small class="" style="color: #999999;">({{student.Role}})</small></td>
<td ng-repeat="permission in student.Permissions">
<input ng-model="permission.Checked" type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
</div>