Thomas Sebastian Thomas Sebastian - 1 month ago 7
AngularJS Question

Angularjs Apply toggle function to only the clicked button inside ng-repeat

I created this fiddle exclusively to adress my problem. I am

ng-repeat
ing 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-repeat
inspite of using the same function name on click. Below is the code. I guess there is something like the
this
operator that I can make use here. My code so far (I created this for the fiddle and not the original),

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"];
});

Answer

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.showDiv function from controller

DEMO FIDDLE


DESCRIPTION

if you use like,

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

when clicking the button will trigger the $scope.showDiv function from controller, and in that function $scope.hiddenDiv property will toggle, and note that $scope.hiddenDiv will 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,

but if use

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

then there will be a hiddenDiv property for each and every repeat since ng-repeat is creating a child scope (DOC). so there is a separate hiddenDiv property for a one specific repeat and its not visible to others its visible just for the relevant repeat.


if you use

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

note that your using myData.hiddenDiv instead of hiddenDiv, in this case angular will check hiddenDiv property of myData object with in ng-repeat child scope and then angular realize there is no something called myData in 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 hiddenDiv without then angular will search it in the ng-repeat child scope and create a new child scope variable after realizing the absence of the hiddenDiv with in child scope.

see the Prototypal Inheritance. there is a good description here.

and please check this description too