使用AngularJS在下拉菜单中输入Bootstrap字段

我有一个使用Bootstrap的下拉菜单，里面有一个输入字段。每次我点击输入字段，下拉菜单消失。我会如何阻止它？使用AngularJS在下拉菜单中输入Bootstrap字段

顺便说一句，我使用AngularJS，所以jQuery的方式可能不适合在这里。

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> 
     <span class="pull-left">{{ trans('text.choose_user') }}</span> 
     <span class="pull-right"><i class="icon-order-table"></i></span> 
    </button> 
    <ul class="dropdown-menu" role="menu"> 
     <li role="presentation" class="basic-padding"><a role="menuitem" tabindex="-1" href="#">{{ trans('text.guest') }}</a></li> 
     <li class="basic-padding"> 
      <div class="input-group"> 
       <input type="search" class="form-control" placeholder="{{ trans('text.search') }}"> 
       <span class="input-group-btn"> 
        <button class="btn btn-default"> 
         <i class="icon-search"></i> 
        </button> 
       </span> 
      </div> 
     </li> 
    </ul> 
</div>

来源

2014-10-19 dulan

尝试增加纳克-click =“$ event.preventDefault（）”到输入元素。 – 2014-10-19 13:10:46

你应该尝试使用角度ui选择。这里的链接github

链接通过文件来plunker demo

转到有几个选项来配置UI的选择。

示例代码配置界面，选择

<ui-select ng-model="person.selected" theme="bootstrap" style="min-width: 300px;"> 
    <ui-select-match placeholder="Select a person...">{{$select.selected.name}}</ui-select-match> 
    <ui-select-choices repeat="person in people | propsFilter: {name: $select.search}"> 
    <div ng-bind-html="person.name | highlight: $select.search"></div> 
    </ui-select-choices> 
</ui-select>

来源

2014-10-19 13:41:26

感谢@Rob J，I想出了一个解决方案，不正是因为他虽然提到：

<input type="search" class="form-control" placeholder="{{ trans('text.search') }}" ng-click="$event.stopPropagation()">

来源

2014-10-19 13:42:42 dulan

将此标记为答案 - 它的工作原理可能对其他人有用（如我:)） – 2014-12-17 16:23:09

作品也像ui-bootstrap一样具有魅力。谢谢 – 2015-03-10 13:42:37

使用AngularJS在下拉菜单中输入Bootstrap字段

回答

相关问题