在 ng repeat 中第二次单击任何循环的按钮时隐藏以前的内容

Question

我在ng repeat里面有一个ng-show。每当我单击 comment button 时，它会显示 div 标签包含评论框，其中显示该列表的先前评论。

实际问题是，当我点击一个评论按钮时，它会显示带有内容的评论框，但是当我点击另一个评论按钮时，会显示带有内容的评论框，但它也会更改之前评论框的内容 (我的意思是 showallcomments which is over-writing every time 当我点击评论按钮时）。

注意：简单来说the problem 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

你能试试吗：

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

和

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

            }

在 ng repeat 中第二次单击任何循环的按钮时隐藏以前的内容

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

angularjs

angularjs-ng-repeat

angularjs-ng-click

angularjs-ng-show