How to target only table row by clicking on angularJS ng-show and ng-hide
I have a table in an angularJS application. What I am trying to do is add a toggle function to show / hide the data section of the table. The function works, but it switches every row of the table. I need it to only switch the line it was clicked 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;
};
source to share
You are changing the "global" property showButtons
. Try to come up with a property for each 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 the program prototype, assuming there is one:
Program.prototype.toggleArrows = function () {
this.showButtons = !this.showButtons;
}
<td class="program-arrows" data-ng-click="program.toggleArrows()">toggle arrows<span></span>
source to share
The problem is that your variable showButtons
is primitive. In your code, you just change $scope.showButtons
which is only inside the main one scope
. But yours ng-repeat
has child scopes, each containing its own variable showButtons
. The most elegant solution is to simply change the value showButtons
in the context of the current child scope
. So you just change your function ng-click
like this:
<td class="program-arrows" data-ng-click="showButtons = !showButtons">toggle arrows<span></span></td>
source to share