In Angular, I know that ng-if and ng-show aren't interchangeable, but in most situations they seem to be pretty interchangeable and I don't know the differences between them - other than ng-if doesn't render things if the "if" condition isn't met.
I have a table that shows/hides a <th> and a corresponding <td> based on an ng-if. That was all working fine until I needed to change the <tr> inside of which the <td> exists to also rely on (a differnet) ng-if. Once I added that, I found that the condition on which the <td> relied wasn't updating when the underlying model value was being changed, but only in the header evaluation. That meant the <th> was staying put while the <td> was toggling, which caused me a bit of confusion.
A coworker just stopped by to tell me it has to do with the fact that ng-if creates a new scope and ng-show doesn't, but we both agree that this still seems like a weird scenario. An example is below.
This doesn't work:
<table>
<tr>
<th ng-show="OptionA == true">Column 1 Header</th>
<th ng-show="OptionA == false">Column 2 Header</th>
<th>Column 3 Header</th>
</tr>
<tr ng-if="OptionB == true">
<td ng-show="OptionA == true">Column 1 Row 1 Data</td>
<td ng-show="OptionA == false">Column 2 Row 1 Data</td>
<td>Column 3 Row 1 Data</td>
</tr>
<tr ng-if="OptionB == false">
<td colspan="3">Row 2 Merged Data</td>
</tr>
</table>
But this does:
<table>
<tr>
<th ng-show="OptionA == true">Column 1 Header</th>
<th ng-show="OptionA == false">Column 2 Header</th>
<th>Column 3 Header</th>
</tr>
<tr ng-show="OptionB == true">
<td ng-show="OptionA == true">Column 1 Row 1 Data</td>
<td ng-show="OptionA == false">Column 2 Row 1 Data</td>
<td>Column 3 Row 1 Data</td>
</tr>
<tr ng-show="OptionB == false">
<td colspan="3">Row 2 Merged Data</td>
</tr>
</table>
No comments:
Post a Comment