[英]How to target just the table row clicked on for angularJS ng-show and ng-hide
I have a table in a angularJS app. 我在angularJS应用程序中有一个表。 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
我需要它只切换点击的行:这是一个示例截屏: http : //screencast.com/t/U5XXU7RN3gm
html 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 JavaScript的
$scope.toggleArrows = function (index) {
$scope.showButtons = !$scope.showButtons;
};
You are modifying "global" showButtons
property. 您正在修改“global”
showButtons
属性。 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>
The problem is that your showButtons
variable is a primitive. 问题是你的
showButtons
变量是一个原语。 In your code you just change the $scope.showButtons
which is just inside of your main scope
. 在您的代码中,您只需更改主
scope
内的$scope.showButtons
即可。 But in your ng-repeat
are child scopes, which every contains its own variable showButtons
. 但是你的
ng-repeat
是子范围,每个范围都包含自己的变量showButtons
。 The most elegant decision is just to change showButtons
value in context of current child scope
. 最优雅的决定只是在当前子
scope
上下文中更改showButtons
值。 So you just change your ng-click
function like this: 所以你只需改变你的
ng-click
功能:
<td class="program-arrows" data-ng-click="showButtons = !showButtons">toggle arrows<span></span></td>
This seems to do the trick also: 这似乎也有诀窍:
$scope.toggleArrows = function (index) {
this.showButtons = !this.showButtons;
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.