twitter-bootstrap AngularJS 下拉菜单中的 Bootstrap 输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26450581/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap input field in dropdown with AngularJS
提问by dulan
I have a dropdown menu using Bootstrap and inside it, there is an input field. Everytime I click the input field, the dropdown menu disappears. How would I stop that?
我有一个使用 Bootstrap 的下拉菜单，其中有一个输入字段。每次单击输入字段时，下拉菜单都会消失。我该如何阻止？
By the way, I'm using AngularJS, so jQuery way probably won't fit in here.
顺便说一下，我使用的是 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>
回答by dulan
Thanks to @Rob J, I've come up with a solution, not exactly as what he mentioned though:
感谢@Rob J，我想出了一个解决方案，但与他提到的不完全一样：
<input type="search" class="form-control" placeholder="{{ trans('text.search') }}" ng-click="$event.stopPropagation()">
回答by Srinivas Paila
You should try using angular ui-select. Here's link to github
您应该尝试使用 angular ui-select。这是github的链接
Link to plunker demo
链接到 plunker演示
Go through the documentation and there are several options to configure ui-select.
查看文档，有几个选项可以配置 ui-select。
Sample code to configure ui-select
配置 ui-select 的示例代码
<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>
