我在表单中有一个输入和一个按钮。
我想输入内容并按回车键,提交输入内容并触发模式打开,显示结果。我不知道如何在 ng-submit 上触发模式而不需要自定义/hacky。有一个可以理解的方法吗?
目前:
<form>
<div ng-show="thirdPhase" class="input-group animated fadeIn">
<input type="text" class="form-control finderBar" placeholder="City, State..." autofocus>
<span class="input-group-btn">
<button data-toggle="modal" data-target="#searchModal" class="btn btn-default" type="button">Go!</button>
</span>
</div>
</form>
和模态:
<div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModalLabel">Search Results</h4>
</div>
<div class="modal-body">
TEST SEARCH MODAL
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
我尝试将典型的模态触发器属性放入表单元素中,但是只要单击表单内的输入,就会触发模态。
最佳答案
因此,假设您不希望弹出模式的特殊按钮,而只是 ngSubmit 来引导(并且不会变得 hacky),您需要将 html 修改为类似这样的内容,
<div ng-controller="whateverYouWant" data-target="#searchModal" data-toggle="modal">
<form ng-submit="submit()">
<div ng-show="thirdPhase" class="input-group animated fadeIn">
<input type="text" class="form-control
finderBar" placeholder="City, State..." autofocus>
<span class="input-group-btn">
</span>
</div>
</form>
</div>
通知我删除了<button>
从 HTML 中输入 data-target
和data-modal
在<div>
有 ng-controller。
最后将您的脚本修改为如下所示:
$scope.submit = function (){
.
.
.
$('#searchModal').modal('show');
}
有了这个,当 ng-submit 完成其任务时,它会自动初始化模式,您可以使用 ng-modal
绑定(bind)数据。
结账 Modals .
关于javascript - 在表单 ngsubmit 上触发模式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34243879/