javascript Angularjs 仅将切换功能应用于 ng-repeat 中单击的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28446894/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs Apply toggle function to only the clicked button inside ng-repeat
提问by Thomas Sebastian
I created this fiddleexclusively to adress my problem. I am ng-repeating certain section. I have a toggle functionality to be implemented inside it. However, when I click the button, function gets triggered for all the repeated items. This works fine when not using ng-repeatinspite of using the same function name on click. Below is the code. I guess there is something like the thisoperator that I can make use here. My code so far (I created this for the fiddle and not the original),
我专门创建了这个小提琴来解决我的问题。我正在ng-repeat某些部分。我有一个要在其中实现的切换功能。但是，当我单击按钮时，所有重复项的功能都会被触发。ng-repeat尽管在单击时使用相同的函数名称，但在不使用时这很好用。下面是代码。我想this我可以在这里使用类似运算符的东西。到目前为止我的代码（我为小提琴而不是原始代码创建了这个），
HTML
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"];
});
回答by Kalhan.Toress
if you need to collapse one specific repeat according to clicked button try followings,
如果您需要根据单击的按钮折叠一个特定的重复，请尝试以下操作，
modify the button as
修改按钮为
<button ng-click="hiddenDiv = !hiddenDiv" class="review">{{lists[$index]}}</button>
and remove the $scope.showDivfunction from controller
并$scope.showDiv从控制器中删除该功能
DESCRIPTION
描述
if you use like,
如果你使用喜欢，
<button ng-click="showDiv()" class="review">{{lists[$index]}}</button>
when clicking the button will trigger the $scope.showDivfunction from controller, and in that function $scope.hiddenDivproperty will toggle, and note that $scope.hiddenDivwill visible to whole controller that means its common for all the controller scope, so if you change it once all other things which using that property will change,
单击按钮时将触发$scope.showDiv控制器的功能，并在该功能$scope.hiddenDiv属性中切换，并注意 $scope.hiddenDiv将对整个控制器可见，这意味着它对所有控制器范围都是通用的，因此如果您更改一次所有其他内容使用该属性会改变，
but if use
但如果使用
<button ng-click="hiddenDiv = !hiddenDiv" class="review">{{lists[$index]}}</button>
then there will be a hiddenDivproperty for each and every repeat since ng-repeatis creating a child scope (DOC). so there is a separate hiddenDivproperty for a one specific repeat and its not visible to others its visible just for the relevant repeat.
那么hiddenDiv每个重复都会有一个属性，因为它ng-repeat正在创建一个子作用域（DOC）。所以hiddenDiv对于一个特定的重复有一个单独的属性，它对其他人不可见，只对相关的重复可见。
if you use
如果你使用
<button ng-click="myData.hiddenDiv = !myData.hiddenDiv" class="review">{{lists[$index]}}</button>
note that your using myData.hiddenDivinstead of hiddenDiv,
in this case angular will check hiddenDivproperty of myDataobject with in ng-repeatchild scope and then angular realize there is no something called myDatain the child scope and then it will search it in the parent scope and realized property exists at there and that property is common for all the repeats like using the showDiv()function. but if u use hiddenDivwithout then angular will search it in the ng-repeatchild scope and create a new child scope variable after realizing the absence of the hiddenDivwith in child scope.
请注意，您使用myData.hiddenDiv而不是hiddenDiv，在这种情况下，angular 将检查子作用域中对象的hiddenDiv属性，然后 angular 意识到子作用域中没有调用的东西，然后它将在父作用域中搜索它，并且在那里存在已实现的属性和该属性对于所有重复（例如使用该函数）都是通用的。但是如果你使用without 那么 angular 将在子作用域中搜索它并在意识到子作用域中没有with后创建一个新的子作用域变量 。myDatang-repeatmyDatashowDiv()hiddenDivng-repeathiddenDiv
see the Prototypal Inheritance. there is a good description here.
参见原型继承。有一个很好的说明这里。
and please check thisdescription too
也请检查此描述
回答by paje007
You can also use a array instead of a single variable and pass the index in the function call so that it will not toggle every thing in one action.
您还可以使用数组而不是单个变量并在函数调用中传递索引，这样它就不会在一个操作中切换所有事情。
<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>
The Controller
控制器
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"];
});
http://jsfiddle.net/paje007/85vp9zme/6/
http://jsfiddle.net/paje007/85vp9zme/6/
In this way, if you want to perform any action in the function you can do that also, like in the fiddle. Here I am clearing the text input on hide.
这样，如果您想在函数中执行任何操作，您也可以这样做，就像在小提琴中一样。在这里，我正在清除隐藏的文本输入。
