控制bootstrap确认模态中的确认按钮

Question

我把例子改成了一个简单的例子。我想在单击 "Remove this {{item.id}}" 按钮时调用删除功能。标题成功获取item.id值

<h4 class="modal-title" id="exampleModalLabel">Do you want to remove  {{item.id}}</h4>

但是按钮没有得到 item.id 值，功能不起作用。而不是 "Remove this item.id" 它只是 "Remove this "，函数也没有得到参数。

<button type="button" id="exampleModalLabel" class="btn btn-primary" ng-click="removeItem(item.id)">Remove this {{item.id}}</button>

我的是这样的：

<tr ng-repeat="item in items">
    <td>{{item.id}}</td>
    <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="{{item.id}}">Remove this item?</button></td>
</tr>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">Do you want to remove  {{item.id}}</h4>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" ng-click="removeItem(item)">Remove this {{item.id}}</button>
      </div>
    </div>
  </div>
</div>

//And this javascript
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var recipient = button.data('whatever');
var modal = $(this);
modal.find('.modal-title').text('New message to ' + recipient);
modal.find('.modal-body input').val(recipient);
});

希望信息足够。如果您需要更多信息，请告诉我。

Answer 1

您的模态框超出 items 范围。您需要将 item 分配给控制器内的某个临时变量。您应该使用 ng-click 来实现这一点，例如 ng-click="tempItem = item"。您可能还必须编辑 removeItem 函数。

<tr ng-repeat="item in items">
    <td>{{item.id}}</td>
    <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="{{item.id}}" ng-click="tempItem = item">Remove this item?</button></td>
</tr>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">Do you want to remove  {{tempItem.id}}</h4>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" id="exampleModalLabel" class="btn btn-primary" ng-click="removeItem(tempItem)">Remove this {{tempItem.id}}</button>
      </div>
    </div>
  </div>
</div>

//And this javascript
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var recipient = button.data('whatever');
var modal = $(this);
modal.find('.modal-title').text('New message to ' + recipient);
modal.find('.modal-body input').val(recipient);
});

Answer 2

试试这个：

<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" id="removeButton" class="btn btn-primary">Remove this <span id="itemid"></span></button>
</div>

//JS
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var recipient = button.data('whatever');
var modal = $(this);
modal.find('.modal-title').text('New message to ' + recipient);
modal.find('.modal-body input').val(recipient);

modal.find('#itemid').html(recipient); // add this
modal.find('#removeButton').attr('ng-click', 'removeItem('+recipient+')'); // add this
});

控制bootstrap确认模态中的确认按钮

Control the confirm button in bootstrap confirm modal

javascript

jquery

twitter-bootstrap

angularjs

bootstrap-modal