ループのボタンの2回目のクリックで以前のコンテンツを非表示にします。

Question

ng-showの中にng repeatがあります。 comment buttonをクリックするたびに、divタグにはそのリストの前のコメントを示すコメントボックスが表示されます。

実際の問題は、コメントボタンをクリックすると内容のコメントボックスが表示されますが、別のコメントボタンをクリックすると内容のコメントボックスが表示されますが、前のコメントボックスの内容も変更されますコメントボタンをクリックすると意味するshowallcomments which is over-writing every time）。

注：コメント]ボタンをクリックすると、より簡単な言葉the problem is-で、コメントボタンdoesntの近く

注クリックすることで、以前に開かれたコメントボックス：コメントボックスが

をポップアップしないモデルではありません

だから私のソリューションは、私は2番目のコメント]ボタンをクリックしたときに、それはすべての以前のコメントボックスを非表示にするです。（私はコメントボタンを毎回クリックすると、すべての以前に開かれたコメントボックスを非表示にする必要があります）

どうすればいいですか？誰でも助けてくれるでしょう

あなたは私のコードを見ればわかるかもしれません。

私のコードは、

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

      }