Seeking assistance with implementing a toggle function in an angularJS app for showing/hiding a specific table data section. Currently, the toggling functionality is working, but it toggles every row in the table instead of just the clicked row. See this example screencast for clarification:
Here is the HTML code snippet:
<tr data-toggle="modal" data-ng-repeat="program in listPrograms | orderBy:predicatemodal:reverse | filter: searchPrograms" isdisabled-program ng-click="setSelected(this)" ng-class="selected">
<td>
<div popover-placement="right" popover-trigger="mouseenter" popover="{{program.programName}}">{{program.programName | characters:20}}</div>
</td>
<td>{{program.waDisplayName == null ? "N/A" :program.waDisplayName | characters:20}}</td>
<td>{{program.startDate}}</td>
<td>{{program.deadline}}</td>
<td >{{program.status}}</td>
<td>
<div data-ng-hide="showButtons" class="showDate">{{program.updatedDate}}</div>
<div data-ng-show="showButtons" class="showButtons">
<a data-ng-click=""><i class="fa fa-pencil"></i>edit</a>
<a data-ng-click=""><i class="fa fa-chevron-right"></i>details</a>
</div>
</td>
<td class="program-arrows" data-ng-click="toggleArrows($index)">toggle arrows<span></span>
</td>
</tr>
And here is the relevant JavaScript code:
$scope.toggleArrows = function (index) {
$scope.showButtons = !$scope.showButtons;
};