CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-click
jmccommas
jmccommas

Reputation: 567

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

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;

    };

Upvotes: 3

Views: 2205

Answers (3)

ababashka
ababashka

Reputation: 2101

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>

Upvotes: 1

jmccommas
jmccommas

Reputation: 567

This seems to do the trick also:

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

Upvotes: 0

Pavlo
Pavlo

Reputation: 44967

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>

Upvotes: 2

Related Questions