I'm currently learning AngularJS for a project and I have a model that includes elements of different types. I want to display these elements in a table similar to the example below:
<table>
<tr><td>nameA</td><td>...</td><td>...</td></tr> <!-- elements of type A -->
<tr><td>nameB</td><td colspan="2">...data...</td></tr> <!-- elements of type B -->
<tr><td>nameC</td><td>...</td><td>...</td></tr> <!-- elements of type A -->
</table>
I need to figure out how to achieve this using AngularJS. So far, I've tried the following:
<table>
<tr ng-repeat="elem in data.elements | orderBy:'name'">
<td>{{ elem.name }}</td><td>...</td><td>...</td>
</tr>
</table>
Unfortunately, all the rows look the same. I'm unsure how to create a conditional directive based on elem.type to use different templates for each row. Ideally, something like this:
<table>
<tr ng-repeat="elem in data.elements | orderBy:'name'">
<pseudo-tag ng-if="elem.type == 'typeA'">
<td>{{ elem.name }}</td><td>...</td><td>...</td>
</pseudo-tag>
<pseudo-tag ng-if="elem.type == 'typeB'">
<td>{{ elem.name }}</td><td colspan="2">...data...</td>
</pseudo-tag>
</tr>
</table>
I would greatly appreciate any guidance on the proper AngularJS approach to solving this problem.