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

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

• javascript
• angularjs
• angularjs-ng-repeat
• this
• togglebutton

• Here is the toggle that works without ng-repeat jsfiddle.net/thomsebastin/jhhtkuuv/3 – Thomas Sebastian Commented Feb 11, 2015 at 5:01

2 Answers 2

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

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.