angular ng-repeat에서 모달 부트 스트랩을 사용하는 방법은 무엇입니까?

Question

이름 목록을 가져 오는 Angular 테이블이 있습니다. 사용자가 이름 앞에있는 버튼을 클릭하면 이름을 삭제할 수 있기를 원합니다. 그러나 그 전에 모달을 보여주고 사용자에게 확인을 요청합니다.

<table class="table table-condensed table-striped"> 
     <thead> 
     <tr> 
      <th>Name</th> 
     </tr> 
      </thead> 
      <tbody> 
      <tr data-ng-repeat="c in vm.entity | filter:vm.filter track by c.Id"> 
       <td> 
        <span>{{c.Name}}</span> 
        </td> 
        <td>           
        <button class="glyphicon glyphicon-trash" type="button" data-toggle="modal" data-target=".bs-example-modal-sm"></button> 

        </td> 
       </tr> 
      </tbody> 
    </table> 

저는 Bootstap 모달을 사용하고 있습니다. 여기에 제가 갖고있는 것이 있습니다.

<div class="modal fade bs-example-modal-sm"> 
    <div class="modal-dialog modal-sm"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true"></span><span class="sr-only">Close</span></button> 
       <h4 class="modal-title">Are you sure?</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Are you sure you want to delete this Item?</p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">No</button> 
       <button type="button" data-ng-click="vm.remove(c)" data-dismiss="modal" class="btn btn-primary">Yes</button> 
      </div> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

문제는 모달의 버튼은 루프 아니기 때문에 내가 항목을 삭제하려면 vm.remove 방법에 올바른 객체에 통과 할 수있다.

누구든지이 문제를 해결하는 방법을 알고 있습니까?

Answer 1

Ok 얘들 아,

도움 주셔서 감사합니다.

버튼 바로 옆에있는 모달을 이동하여 문제를 해결할 수 있도록 @Dabbiemiller가 제안한대로 모달이 반복되고 각 요소의 ID와 일치하는 각 모달에 ID가 지정됩니다. 나는 data-target = "modal {{c.id}}"를 할당하고 작동한다.

또한 페이드 클래스가 문제를 일으키기도했다.

<button class="glyphicon glyphicon-trash" ng-show="vm.isAdmin == 'True'" type="button" data-toggle="modal" data-target="#modal{{c.id}}"></button> 
<div class="modal" id="modal{{c.id}}"> 
    <div class="modal-dialog modal-sm"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true"></span><span class="sr-only">Close</span></button> 
      <h4 class="modal-title">Are you sure?</h4> 
      </div> 
      <div class="modal-body"> 
      <p>Are you sure you want to delete this Item?</p> 
       </div> 
       <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">No</button> 
       <button type="button" data-ng-click="vm.remove(c)" data-dismiss="modal" class="btn btn-primary">Yes</button> 
       </div> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

---