控制Bootstrap确认模态框中的确认按钮。

Question

控制Bootstrap确认模态框中的确认按钮。

javascriptjqueryangularjstwitter-bootstrapbootstrap-modal

3

我将示例更改为简单的形式。当我点击“删除此{{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);
});

我希望这些信息足够了。如果你需要更多的信息，请告诉我。

- Vasil Emilov

应该把removeItem(item.id)改为removeItem({{ item.id }})，对吗？ - Paul Moldovan

不行，结果还是一样的... 它甚至在innerHTML中也没有得到它... - Vasil Emilov

模态框是否出现在屏幕上？ - Paul Moldovan

您可以通过使用JavaScript设置值来绕过这个问题。在JS中设置值：var item = '{{item.id}}'; 然后在模态框的函数中：modal.find（'.modal-body button'）。attr（"ng-click"，“removeItem（”+ item +“）”）; - Paul Moldovan

@PaulMoldovan 我试过了，但还是不起作用... - Vasil Emilov

2个回答

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

- Paul Moldovan

一切看起来都很好，但是函数不想触发...我不知道为什么...我正在尝试调试它，看看出了什么问题，但似乎函数就是不触发... - Vasil Emilov

这个<span>标签的代码没问题... 它甚至添加了 "ng-click="removeItem(myItem)"，但是当我点击时，函数没有触发... - Vasil Emilov

很抱歉听到这个。不幸的是，我不懂AngularJs，无法帮助你。这里有一个链接可能会有所帮助：https://dev59.com/cl4c5IYBdhLWcg3wdKKT - Paul Moldovan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gvidas · Accepted Answer

您的模态框超出了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);
});