Within my collection of div elements showcasing product information, there is a need to display or hide specific fields based on the product type. While this functionality works smoothly, we now aim to enhance readability by implementing alternating row styles (zebra stripes). The challenge lies in maintaining the alternating styles even when certain rows are hidden, preventing the occurrence of consecutive rows with identical styles. The current HTML structure is as follows:
<div style="alt-1">
<div class="col-md-3 list-item-odd">Location</div>
<div class="col-md-9 list-item-odd" >{{ location }}</div>
</div>
<div ng-show="itemType == 1" style="alt-2">
<div class="col-md-3 list-item-odd">Layout Type</div>
<div class="col-md-9 list-item-odd" >{{ layoutType}}</div>
</div>
<div style="alt-1">
<div class="col-md-3 list-item-odd">Category</div>
<div class="col-md-9 list-item-odd" >{{ category }}</div>
</div>
The concern arises when itemType is not equal to 1, resulting in two adjacent rows styled "alt-1."
An approach I considered involves crafting a directive named alternate-styles with a lower priority to iterate through DIVs post ng-show (or ng-hide) execution.
<div class="enclosing" alternate-styles>
The aforementioned HTML
</div>
However, uncertainties linger. Firstly, its effectiveness within an Angular environment remains uncertain, given the complexity of the framework. Secondly, I question whether my reliance on jQuery expertise blinds me to a more straightforward Angular solution.
Share your insights and recommendations,
Appreciate it,
Jerry