Hide previous content on second click of the button of any loop inside ng repeat

Question

I have a ng-show inside ng repeat. Whenever i click the comment button it shows the div tag contains comment box which shows previous comments of that list.

The actual problem is when i click one comment button, it shows comment box with contents but when i click the another comment button, comment box with contents will be shown but it also changes the contents of previous comment box also (i mean showallcomments which is over-writing every time when i click on comment button).

Note: In more simple words the problem is- On clicking comment button , the previously opened comment box by clicking comment button doesnt close

Note: Comment box is not a model which doesn't popup

So my solution is whenever i click the second comment button, it should hide all previous comment box.(I need to hide the all previously opened comment box when i click comment button each time)

How can i do this? can anyone help me out

I think u may understand the question if you look my code.

My code is,

            <div class="col-lg-12" ng-repeat="dat in details | orderBy : sortColumn : reverseSort | filter : { product_name : textname} as results">
                    <ul>
                        <li><b>Product:</b><span> {{dat.product_name}}</span></li>
                        <li><b>Product Manager:</b><span> {{dat.first_name}} {{dat.last_name}}</span></li>
                        <li><b>Status:</b><span> {{dat.status}}</span></li>
                        <li><b>Description:</b><span> {{dat.description}}</span></li>
                    </ul>
                    <!--Comment Button -->
                    <button style="background-color:#4C97C8;color:white;height:30px" class="btn" ng-click="comment=true;$parent.showcomments(dat.id)"><span class="glyphicon glyphicon-comment"></span><strong> Comment</strong></button>

                    <!--Comment Box -->
                    <div ng-show="comment">
                     <div class="detailBox col-lg-12">
                        <div class="titleBox">
                            <label>Comment Box</label>
                            <button type="button" class="close" aria-hidden="true" ng-click="comment=false">&times;</button>
                        </div>
                        <div class="actionBox">
                            <ul class="commentList">
                                <li ng-repeat="sh in showallcomments">
                                <div class="commenterImage">
                                    <img src="" />
                                </div>
                                <div class="commentText">
                                    <p class="">{{sh.comment}}</p> <span class="date sub-text">{{sh.date_created}}</span>
                                </div>
                                </li>
                            </ul>
                            <div class="input-group ">
                                <input type="text" id="commentarea" name="commentarea" class="form-control" placeholder="Your Comments" aria-describedby="basic-addon2" ng-model="takecomment">
                                <span class="input-group-addon" id="basic-addon2" ng-click="takecomment=mycomment(dat.id,takecomment)"><span class="glyphicon glyphicon-send"></span></span>
                            </div>
                        </div>
                     </div>
                    </div>
            </div>

Answer 1

Can you try:

<button style="background-color:#4C97C8;color:white;height:30px" class="btn" ng-click="$parent.commentId=dat.id;$parent.showcomments(dat.id)"><span class="glyphicon glyphicon-comment"></span><strong> Comment</strong></button>

and

<div ng-show="dat.id===$parent.commentId">

Answer 2

    I think you are showing the content through modal "showallcomments". which is over-writing every time when you click on comment button.

    I mean to say you are binding same variable in all comment boxes.


 <div class="col-lg-12" ng-repeat="dat in details | orderBy : sortColumn : reverseSort | filter : { product_name : textname} as results">
                    <ul>
                        <li><b>Product:</b><span> {{dat.product_name}}</span></li>
                        <li><b>Product Manager:</b><span> {{dat.first_name}} {{dat.last_name}}</span></li>
                        <li><b>Status:</b><span> {{dat.status}}</span></li>
                        <li><b>Description:</b><span> {{dat.description}}</span></li>
                    </ul>
                    <!--Comment Button -->
                    <button style="background-color:#4C97C8;color:white;height:30px" class="btn" ng-click="showCommentBox($index);$parent.showcomments(dat.id)">
                    <span class="glyphicon glyphicon-comment"></span><strong> Comment</strong></button>

                    <!--Comment Box -->
                    <div ng-show="dat.showComment">
                     <div class="detailBox col-lg-12">
                        <div class="titleBox">
                            <label>Comment Box</label>
                            <button type="button" class="close" aria-hidden="true" ng-click="comment=false">&times;</button>
                        </div>
                        <div class="actionBox">
                            <ul class="commentList">
                                <li ng-repeat="sh in showallcomments">
                                <div class="commenterImage">
                                    <img src="" />
                                </div>
                                <div class="commentText">
                                    <p class="">{{sh.comment}}</p> <span class="date sub-text">{{sh.date_created}}</span>
                                </div>
                                </li>
                            </ul>
                            <div class="input-group ">
                                <input type="text" id="commentarea" name="commentarea" class="form-control" placeholder="Your Comments" aria-describedby="basic-addon2" ng-model="takecomment">
                                <span class="input-group-addon" id="basic-addon2" ng-click="takecomment=mycomment(dat.id,takecomment)"><span class="glyphicon glyphicon-send"></span></span>
                            </div>
                        </div>
                     </div>
                    </div>
            </div>


            showCommentBox = function(index){

                angular.forEach('details', function(value, key){

                    if(key == index){
                        value.showComment = true;
                    }else{
                        value.showComment = false;
                    }
                })

            }