반복 내에서 반복 루프의 버튼을 두 번째 클릭 할 때 이전 내용을 숨기기

Question

ng-show 내 안에 ng repeat이 있습니다. comment button을 클릭 할 때마다 div 태그에 해당 목록의 이전 설명을 표시하는 설명 상자가 포함되어 있음을 보여줍니다.

실제 문제는 하나의 댓글 버튼을 클릭하면 콘텐츠가 포함 된 댓글 상자가 표시되지만 다른 댓글 버튼을 클릭하면 콘텐츠가 포함 된 댓글 상자가 표시되지만 이전 메모 상자의 내용도 변경됩니다. showallcomments which is over-writing every time는 내가 코멘트 버튼을 클릭 할 때를 의미합니다).

참고 : 주석 버튼을 클릭에 대한 간단한 단어 the problem is-에서는

주 가까이 주석 버튼 나던 클릭하여 이전에 열었던 주석 상자 : 설명 상자는

팝업하지 않는 모델이 아니다

내 솔루션은 두 번째 메모 버튼을 클릭 할 때마다 이전 메모 상자를 모두 숨겨야합니다 (매번 메모 버튼을 클릭 할 때 이전에 열린 메모 상자를 숨길 필요가 있음)

어떻게해야합니까? 아무도 나를 도와 줄 수

나는 내 코드를 보면 u가 질문을 이해할 것 같아.

내 코드는,

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

      }