On my accordion table, I have nested ng-repeats which create child rows for each parent row. To achieve this, I structured the layout by using <tbody> for each parent item and placing the parent row within a <tr>. I then utilized ng-repeat to insert all the child rows. However, due to multiple <tbody> elements, the zebra striping on the table becomes disrupted. Additionally, the table has collapsible/expanding child rows, requiring the striping to be accurate for only the visible rows. Thus, I'm manually adding striping classes by toggling a scope variable with Angular's ng-init and applying it with ng-class.
In HTML:
<tbody ng-repeat="parentRow in myData" ng-init="changeRowClass($even)">
<tr ng-class="{'industry-payments-even-row': industryRowEven, 'industry-payments-odd-row': !industryRowEven}">
<td>{{parentRow.industryCode}} - {{parentRow.industryCodeDescription}}</td>
<td class="numeric">{{parentRow.ValueOneSum}}</td>
<td class="numeric">{{parentRow.ValueTwoSum}}</td>
</tr>
<tr ng-repeat="childRow in parentRow.childIndustries" ng-init="changeRowClass($even)" ng-class="{'industry-payments-even-row': industryRowEven, 'industry-payments-odd-row': !industryRowEven}">
<td>{{childRow.industryCode}} - {{childRow.industryCodeDescription}}</td>
<td class="numeric">{{childRow.ValueOne}}</td>
<td class="numeric">{{childRow.ValueTwo}}</td>
</tr>
</tbody>
Controller snippet:
$scope.industryRowEven = false;
$scope.changeRowClass = function(isEven) {
$scope.industryRowEven = isEven;
};
For each iteration (parent or child), I want the class to alternate for the next row. Even though the variable toggles correctly in the debugger, the issue lies in ng-class binding to the current state in the scope. This causes it to switch the class for all rows instead of adhering to the state at the time of rendering that specific row.
I simply need the class printed based on the variable state during each row render, disregarding it until the ng-repeat starts over (e.g., for sorting or visibility changes).
Is there a method to break this binding?