Show hidden div on ng-click within ng-repeat

Question

$scope.editPostComment = false;

When I click on the btn it shows the textarea in all the repeated item when I want to show it on the clicked div only!

 <div class="commentBox" ng-show = "editPostComment" >
                    <textarea name="editor2" class="content-box allfilecomment" id="comment-box" focus-me="{{focusCommentBox}}"
                    ng-model="allCommentText"
                    markdown-editor="{'iconlibrary': 'fa', addExtraButtons: true, resize: 'vertical'}"
                    rows="10" >

                    </textarea>
                    <div class="hints">
                      <span class="boldtext">**Bold**</span>
                      <span class="italictext">_itlaics_</span>
                      <span class="striktext">~~strike~~</span>
                      <span class="codetext">'code'</span>
                      <span class="codetext">'''preformatted'''</span>
                      <span class="quotetext">>quote</span>
                    </div>
                    <div id="comment-btns">
                      <button class="btn btn-primary pull-left" ng-class="{'loading': commentig}" ng-disabled="commentig" ng-click="postAllComment(commentmode)">Edit</button>
                    </div>
                </div>

Answer 1

You need to specify an id for each row using the index then make the visibility of said row based on that.

 function showEdit(id) { vm.editPostComment = id; } 

 <div ng-repeat="row in rows track by $index"> <div class="commentBox" ng-show = "editPostComment == $index" > <textarea name="editor2" class="content-box allfilecomment" id="comment-box" focus-me="{{focusCommentBox}}" ng-model="allCommentText" markdown-editor="{'iconlibrary': 'fa', addExtraButtons: true, resize: 'vertical'}" rows="10" > </textarea> <div class="hints"> <span class="boldtext">**Bold**</span> <span class="italictext">_itlaics_</span> <span class="striktext">~~strike~~</span> <span class="codetext">'code'</span> <span class="codetext">'''preformatted'''</span> <span class="quotetext">>quote</span> </div> <div id="comment-btns"> <button class="btn btn-primary pull-left" ng-class="{'loading': commentig}" ng-disabled="commentig" ng-click="showEdit($index)">Edit</button> </div> </div> </div>