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

好的伙计们，

感谢您的帮助。

我已经设法通过移动按钮旁边的模式来修复它，因此重复模态以及@Dabbiemiller建议的按钮，然后我为每个模态分配一个ID，每个模态匹配每个元素的id，并且我指定了data-target =＆＃34; modal {{c.id}}＆＃34;它的工作原理:)

此外，我已更改为因为淡入淡出类也导致了问题。

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

如何在角度ng-repeat中使用模态Bootstrap？

1 个答案: