[英]How to target just the table row clicked on for angularJS ng-show and ng-hide
我在angularJS應用程序中有一個表。 我要做的是添加一個切換功能來顯示/隱藏表數據部分。 該功能有效,但它切換表格上的每一行。 我需要它只切換點擊的行:這是一個示例截屏: 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;
};
您正在修改“global” showButtons
屬性。 嘗試為每個按鈕提供一個屬性:
<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;
}
更好的解決方案是將此方法添加到程序的原型中,假設有一個:
Program.prototype.toggleArrows = function () {
this.showButtons = !this.showButtons;
}
<td class="program-arrows" data-ng-click="program.toggleArrows()">toggle arrows<span></span>
問題是你的showButtons
變量是一個原語。 在您的代碼中,您只需更改主scope
內的$scope.showButtons
即可。 但是你的ng-repeat
是子范圍,每個范圍都包含自己的變量showButtons
。 最優雅的決定只是在當前子scope
上下文中更改showButtons
值。 所以你只需改變你的ng-click
功能:
<td class="program-arrows" data-ng-click="showButtons = !showButtons">toggle arrows<span></span></td>
這似乎也有訣竅:
$scope.toggleArrows = function (index) {
this.showButtons = !this.showButtons;
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.