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

Question

I created this fiddle exclusively 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-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"];
});

Solution 1

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

Solution 2

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/

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.

Comments

[Thomas Sebastian]

Works like a charm. Thanks.

[Kalhan.Toress]

glad to help you and i added some description and hope it will help you to understand the issue better. :)

[Thomas Sebastian]

I totally appreciate your help. Since I am a beginner, I would also appreciate if you address in your description what happened here when I slightly modified things. jsfiddle.net/thomsebastin/pq72u7ge/1

[Thomas Sebastian]

This is very helpful information. Thanks for your time toress. Have a nice day.

[Kalhan.Toress]

its glad to help you. :) happy coding :)

[Thomas Sebastian]

You somehow read my mind that it is for a comment box :) This one works well too. Thank you.

[Anant Gupta]

Thanks a lot! Badly needed this :)