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>

Sreehari S · Accepted Answer · 2017-01-20T12:31:58.093

3

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">

edited Jan 20 '17 at 12:31

answered Jan 20 '17 at 09:30

Sreehari S

388
1
12

didnt worked and u didn't notice my comment button properly which is above the comment box – Shashank G Jan 20 '17 at 10:00
not worked again. On clicking comment button , the previously opened comment box by clicking comment button doesnt close still. Is there any other idea? – Shashank G Jan 20 '17 at 11:17
1

try `$parent.commentId` instead of just `commentId` in both places? – Sreehari S Jan 20 '17 at 11:25
ng-click="$parent.commentId=dat.id" worked without brackets – Shashank G Jan 20 '17 at 12:29

sonu singhal · Answer 2 · 2017-01-20T10:19:06.837

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

            }

correct .. my question is different - I need to hide the all previously opened comment box when i click comment button each time. — Shashank G, Jan 20 '17 at 10:04
Ok so the flag which you are using for showing the comment section should not be single there should be multiple flags. You can add a property showComment in every object of details and set the flag showComment true of clicked object only. — sonu singhal, Jan 20 '17 at 10:12
not worked ..i am excepting answer like other answer for this question — Shashank G, Jan 20 '17 at 10:58

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

2 Answers2