在引导确认模式下控制确认按钮
Control the confirm button in bootstrap confirm modal
确认模式示例
我把这个例子改成了一个简单的例子。我想在单击"删除此{{item.id}}"按钮时调用删除函数。标题成功获取item.id值。
<h4 class="modal-title" id="exampleModalLabel">Do you want to remove {{item.id}}</h4>
但是按钮没有得到item.id值,函数也不起作用。而不是"Removethiseitem.id",它只是"Removethis",函数也没有得到参数。
<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">×</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);
});
我希望这些信息足够了。如果您需要更多信息,请告诉我。
尝试使用这个:
<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
});
您的模态超出了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">×</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);
});
相关文章:
- JS编译器/包管理器,用于版本控制
- 是否可以控制获取哪些Google地图脚本(JavaScript API)
- 三星智能电视应用程序;Brightcove示例应用程序远程控制问题
- 如何控制组件'的createContent函数被激发
- 节点协同与生成器和Promise并行流量控制
- 否'访问控制允许来源'标头存在于IISNOde中请求的资源(AngularJS+NodeJs)上
- 按钮字段确认点击不'不起作用
- 使用:new Image()控制加载html.src=html_URL
- 传单缩放控制位置错误
- 删除确认对话框在第一次单击时不起作用
- Node.js使用Series函数(模式?)实现流控制时出现意外结果
- 如果类不是一个选项,如何在使用 jQuery 时控制(避免)嵌套 html 元素的样式
- 在表单完成并确认密码之前,请禁用提交按钮
- 在asp.net中确认是或否消息
- 使用jQuery控制来自图像的音频
- 控制页面在确认框的情况下移动到顶部
- 在引导确认模式下控制确认按钮
- 确认对话框和如何控制它的代码后面
- JavaScript在ASP上确认.网络按钮控制
- 在if语句中调用一个函数来控制确认警报