I am dealing with a table that has row grouping based on the value of one of its fields. The grouping functionality is in place and working well. To expand and collapse these groups, I am utilizing ng-hide. My goal is to have the first group expanded by default while all other groups remain collapsed. Initially, I attempted to achieve this using a flag variable like ng-hide="flag".
However, I found that using this flag was causing all groups to either expand or collapse simultaneously.
Is there a way to conditionally set this flag at runtime so that ng-hide functions dynamically depending on the situation? I attempted to incorporate a JavaScript function and call it within ng-hide="funct()", but unfortunately, that approach did not yield the desired outcome.
<tbody ng-repeat="group in $groups" class="ng-cloak">
<tr>
<td class="ng-cloak">
<a href="" ng-click="flag = !flag">
<span ng-show="flag"><i class="icon-fixed-width"></i></span>
<span ng-show="!flag"><i class="icon-fixed-width"></i></span>
</a>
{{group.value}}
</td>
</tr>
<tr ng-hide="flag" ng-repeat="x in group.data | filter:query| orderBy:predicate:reverse">
</tr>
</tbody>