使用AngularJS在下拉菜單中輸入Bootstrap字段

Question

我有一個使用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> 

Answer 1

你應該嘗試使用角度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> 

Answer 2

感謝@Rob J，I想出了一個解決方案，不正是因爲他雖然提到：

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