javascript - Angular.js将切换功能仅应用于ng-repeat中的单击按钮

我专门创建此fiddle来解决我的问题。我在某节中ng-repeat。我有一个要在其中实现的切换功能。但是，当我单击按钮时，将为所有重复项触发功能。当不使用ng-repeat时，即使单击时使用相同的函数名，此方法也能正常工作。下面是代码。我想这里可以使用类似this运算符的东西。到目前为止，我的代码(我是为小提琴而非原始语言创建的)，

HTML

<div ng-app="app">
    <div ng-controller="CommentController">
        <div ng-repeat="list in lists">
            <button ng-click="showDiv()" class="review">{{lists[$index]}}</button>
            <div ng-show="hiddenDiv">This is the div to be toggled on clicking any of the above button. And they do so as they make use of <i>same function on click.</i>

            </div>
        </div>
    </div>
</div>

Controller

var app = angular.module('app', []);

app.controller('CommentController', function ($scope) {
    $scope.hiddenDiv = true;
    $scope.showDiv = function () {
        $scope.hiddenDiv = !$scope.hiddenDiv;
    };
    $scope.lists = ["one", "two", "three", "four", "five"];
});

最佳答案

如果您需要根据单击的按钮折叠一个特定的重复项，请尝试以下操作，

将按钮修改为

<button ng-click="hiddenDiv = !hiddenDiv" class="review">{{lists[$index]}}</button>

并从 Controller 中删除$scope.showDiv函数

DEMO FIDDLE

说明

如果你用像

 <button ng-click="showDiv()" class="review">{{lists[$index]}}</button>

单击按钮时，将触发 Controller 的$scope.showDiv函数，并且该函数中的$scope.hiddenDiv属性将切换，并且请注意，$ scope.hiddenDiv 对整个 Controller 可见，这意味着它在所有 Controller 范围内都是通用的，因此，如果进行更改一旦使用该属性的所有其他事物都将改变，

但是如果使用

<button ng-click="hiddenDiv = !hiddenDiv" class="review">{{lists[$index]}}</button>

那么每一次重复都会有一个hiddenDiv属性，因为ng-repeat正在创建子范围(DOC)。因此，对于一个特定的重复，有一个单独的hiddenDiv属性，对于其他重复不可见，对于其他重复不可见。

如果您使用

<button ng-click="myData.hiddenDiv = !myData.hiddenDiv" class="review">{{lists[$index]}}</button>

请注意，您使用 myData.hiddenDiv而不是hiddenDiv ，
在这种情况下，angular将检查hiddenDiv子作用域中myData对象的ng-repeat属性，然后angular意识到在子作用域中不存在称为myData的东西，然后它将在父作用域中进行搜索，并且意识到该属性存在于此，并且该属性为对于所有重复而言都是常见的，例如使用showDiv()函数。但是，如果您不使用hiddenDiv，则angular会在子范围内不存在ng-repeat后，在hiddenDiv子范围内进行搜索，并创建一个新的子范围变量。

请参见原型(prototype)继承。有一个很好的描述here。

并且也请检查this描述