如何仅针对 angularJS ng-show 和 ng-hide 单击的表行答案

【问题标题】：How to target just the table row clicked on for angularJS ng-show and ng-hide如何仅针对 angularJS ng-show 和 ng-hide 单击的表行
【发布时间】：2014-11-12 05:49:28
【问题描述】：

我在 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;

    };

【问题讨论】：

标签： javascript angularjs angularjs-ng-click

【解决方案1】：

您正在修改“全局”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>

【讨论】：

【解决方案2】：

问题在于您的 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>

【讨论】：

【解决方案3】：

这似乎也可以解决问题：

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

【讨论】：