angular bootstrap 回车点击模式打开
angular bootstrap modal opening on the enter click
在我的控制器中我有方法
- $scope.openJukeboxesModalToGroup -- 打开模态弹出窗口
- $scope.searchJukeboxes --- 在页面上搜索
- $scope.keyPressed -- 捕获按键
在部分表格中
<form class="form-inline" role="form" ng-submit="deadForm()">
<div class="form-group">
<button ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
</div>
<div class="form-group">
<input type="text" ng-model="jukeboxFilter" ng-keypress="keyPressed($event, 'search')" class="form-control" placeholder="search">
</div>
<button type="button" ng-click="searchJukeboxes()" class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" ng-click="resetFilter()" class="btn btn-info"><span class="glyphicon glyphicon-repeat"></span></button>
</form>
keyPressed 方法是
$scope.keyPressed = function($event, eventType) {
$event.stopImmediatePropagation();
if(eventType=='search') {
if($event.which==13) {
$scope.searchJukeboxes();
}
}
};
只要有人在文本栏中键入内容并单击回车,我就会尝试开始搜索。但我不知道 openJukeboxesModalToGroup() 方法也被调用了。我试图通过调用停止事件传播、更改 openJukeboxesModalToGroup() 方法的名称来阻止这种情况。但没有任何效果。对此有任何帮助。
deadForm() 方法正在实施,我在 chrome 控制台中没有收到任何错误。
将 openJukeBoxesModalToGroup()
的按钮更改为:
<button type="button" ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
问题是您没有提供类型,因此它将按钮归类为提交,在这种情况下,openJukeboxesModalToGroup() 将从您的输入 submit
事件中触发。
当您在表单中按下回车键时,它会触发提交,我建议您通过 ng-submit 指令将您的方法添加到表单本身,并使您的按钮成为提交...
<form class="form-inline" role="form" ng-submit="searchJukeboxes()">
<div class="form-group">
<button type="button" ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
</div>
<div class="form-group">
<input type="text" ng-model="jukeboxFilter" ng-keypress="keyPressed($event, 'search')" class="form-control" placeholder="search">
</div>
<button type="submit" ng-click="searchJukeboxes()" class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" ng-click="resetFilter()" class="btn btn-info"><span class="glyphicon glyphicon-repeat"></span></button>
</form>
在我的控制器中我有方法
- $scope.openJukeboxesModalToGroup -- 打开模态弹出窗口
- $scope.searchJukeboxes --- 在页面上搜索
- $scope.keyPressed -- 捕获按键
在部分表格中
<form class="form-inline" role="form" ng-submit="deadForm()">
<div class="form-group">
<button ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
</div>
<div class="form-group">
<input type="text" ng-model="jukeboxFilter" ng-keypress="keyPressed($event, 'search')" class="form-control" placeholder="search">
</div>
<button type="button" ng-click="searchJukeboxes()" class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" ng-click="resetFilter()" class="btn btn-info"><span class="glyphicon glyphicon-repeat"></span></button>
</form>
keyPressed 方法是
$scope.keyPressed = function($event, eventType) {
$event.stopImmediatePropagation();
if(eventType=='search') {
if($event.which==13) {
$scope.searchJukeboxes();
}
}
};
只要有人在文本栏中键入内容并单击回车,我就会尝试开始搜索。但我不知道 openJukeboxesModalToGroup() 方法也被调用了。我试图通过调用停止事件传播、更改 openJukeboxesModalToGroup() 方法的名称来阻止这种情况。但没有任何效果。对此有任何帮助。
deadForm() 方法正在实施,我在 chrome 控制台中没有收到任何错误。
将 openJukeBoxesModalToGroup()
的按钮更改为:
<button type="button" ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
问题是您没有提供类型,因此它将按钮归类为提交,在这种情况下,openJukeboxesModalToGroup() 将从您的输入 submit
事件中触发。
当您在表单中按下回车键时,它会触发提交,我建议您通过 ng-submit 指令将您的方法添加到表单本身,并使您的按钮成为提交...
<form class="form-inline" role="form" ng-submit="searchJukeboxes()">
<div class="form-group">
<button type="button" ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
</div>
<div class="form-group">
<input type="text" ng-model="jukeboxFilter" ng-keypress="keyPressed($event, 'search')" class="form-control" placeholder="search">
</div>
<button type="submit" ng-click="searchJukeboxes()" class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" ng-click="resetFilter()" class="btn btn-info"><span class="glyphicon glyphicon-repeat"></span></button>
</form>