Trường nhập Bootstrap trong menu thả xuống với AngularJS

Question

Tôi có một menu thả xuống bằng Bootstrap và bên trong nó, có một trường nhập. Mỗi khi tôi nhấp vào trường nhập, menu thả xuống sẽ biến mất. Làm thế nào tôi có thể ngăn chặn điều đó?

Nhân tiện, tôi đang sử dụng AngularJS, vì vậy cách jQuery có thể sẽ không khớp ở đây.

<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

Bạn nên thử sử dụng ui-chọn góc. Dưới đây là liên kết để github

Liên kết đến plunker demo

Đi qua các tài liệu và có một số tùy chọn để cấu hình ui-chọn.

Mẫu mã để cấu hình ui-chọn

<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

Nhờ @ Rob J, tôi đã tìm ra một giải pháp, chứ không phải chính xác như những gì ông đã nói mặc dù:

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