How to target just the table row clicked on for angularJS ng-show and ng-hide

Question

I have a table in a angularJS app. What I'm trying to do is add a toggle function to show/hide a table data section. The function works, but it toggles every row on the table. I need it to only toggle the row that was click on: Here is an example screencast: http://screencast.com/t/U5XXU7RN3gm

html

<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>

javascript

$scope.toggleArrows = function (index) {
        $scope.showButtons = !$scope.showButtons;

    };

Answer 1

You are modifying "global" showButtons property. Try to come up with a property for every button:

<div data-ng-hide="program.showButtons" class="showDate">{{program.updatedDate}}</div>
<div data-ng-show="program.showButtons" class="showButtons">
    <!-- ... -->
</div>

$scope.toggleArrows = function (index) {
    var program = $scope.listPrograms[index];
    program.showButtons = !program.showButtons;
}

---

A better solution would be to add this method to program's prototype, assuming that there is one:

Program.prototype.toggleArrows = function () {
    this.showButtons = !this.showButtons;
}

<td class="program-arrows" data-ng-click="program.toggleArrows()">toggle arrows<span></span>

Answer 2

The problem is that your showButtons variable is a primitive. In your code you just change the $scope.showButtons which is just inside of your main scope . But in your ng-repeat are child scopes, which every contains its own variable showButtons . The most elegant decision is just to change showButtons value in context of current child scope . So you just change your ng-click function like this:

<td class="program-arrows" data-ng-click="showButtons = !showButtons">toggle arrows<span></span></td>

Answer 3

This seems to do the trick also:

$scope.toggleArrows = function (index) {
       this.showButtons = !this.showButtons;
    };