AngularJS

Question

के साथ ड्रॉपडाउन में बूटस्ट्रैप इनपुट फ़ील्ड मेरे पास बूटस्ट्रैप का उपयोग करके ड्रॉपडाउन मेनू है और इसके अंदर, एक इनपुट फ़ील्ड है। हर बार जब मैं इनपुट फ़ील्ड पर क्लिक करता हूं, तो ड्रॉपडाउन मेनू गायब हो जाता है। मैं इसे कैसे रोकूं?

वैसे, मैं 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-select का उपयोग करने का प्रयास करना चाहिए। यहाँ प्रलेखन के माध्यम से plunker को demo

जाएं github

लिंक लिंक भी है और वहाँ ui का चयन करें कॉन्फ़िगर करने के लिए कई विकल्प हैं।

नमूना कोड 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 जम्मू के लिए धन्यवाद, मैं एक समाधान के साथ आए हैं, वास्तव में नहीं कि वह क्या है, हालांकि उल्लेख किया:

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