输入单击时角度自举模态开启

时间:2015-01-09 11:41:31

标签: javascript jquery angularjs angular-ui-bootstrap

在我的控制器中我有方法

  • $ 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()方法。我试图通过调用stop event proprpagation,更改openJukeboxesModalToGroup()方法的名称来阻止这种情况。但没有任何工作。对此有任何帮助。

deadForm()方法是实现,我在chrome console中没有收到任何错误。

1 个答案:

答案 0 :(得分:4)

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>