Javascript Angularjs仅将切换功能应用于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>  

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>

单击该按钮时，将从控制器触发

$scope.showDiv

函数，在该函数中，

$scope.hiddenDiv

属性将切换，并且注意，$scope.hiddenDiv将对整个控制器可见，这意味着它对所有控制器作用域都是通用的，所以如果你改变它一次，所有其他使用该属性的东西都会改变

但如果使用

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

请注意，您使用的是

myData.hiddenDiv

而不是

hiddenDiv

， 在这种情况下，angular将使用in

ng repeat

子作用域检查

myData

对象的

hiddenDiv

属性，然后angular意识到子作用域中没有名为

myData

的内容，然后在父作用域中搜索该内容，实现的属性存在于其中，并且该属性对于所有重复操作都像使用

showDiv（）

函数一样。但是如果不使用

hiddenDiv

，angular将在

ng repeat

子作用域中搜索它，并在意识到不存在

hiddenDiv

子作用域后创建一个新的子作用域变量

参见原型遗传。有一个很好的描述

---

也请检查“说明”

您还可以使用数组而不是单个变量，并在函数调用中传递索引，这样它就不会在一个操作中切换所有内容

<div ng-app="app">
<div ng-controller="CommentController">
    <div ng-repeat="list in lists">
        <button ng-click="showDiv($index)" class="review">{{lists[$index]}}</button>
        <div ng-show="!hiddenDiv[$index]">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>
        <input type="text" ng-model="textModel[$index]"/>{{textModel[$index]}}
        </div>
    </div>
</div>

---

这样，如果您想在函数中执行任何操作，您也可以这样做，就像在小提琴中一样。这里我正在清除隐藏上的文本输入。

这里是一个不带

ng repeat

的切换，它就像一个符咒。谢谢。很高兴为您提供帮助，我添加了一些说明，希望它能帮助您更好地理解此问题。：）我非常感谢你的帮助。由于我是一个初学者，如果你能在你的描述中说明当我稍微修改一些东西时发生了什么，我也会很感激。这是非常有用的信息。谢谢你抽出时间来。祝你今天愉快。很高兴能帮助你快乐编码：）你从某种程度上理解了我的想法，这是一个评论框：）这个也很好用。非常感谢。

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

<div ng-app="app">
<div ng-controller="CommentController">
    <div ng-repeat="list in lists">
        <button ng-click="showDiv($index)" class="review">{{lists[$index]}}</button>
        <div ng-show="!hiddenDiv[$index]">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>
        <input type="text" ng-model="textModel[$index]"/>{{textModel[$index]}}
        </div>
    </div>
</div>

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

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