我正在尝试为子菜单提供搜索文本框。尽管它工作正常，但我需要继续按住鼠标才能输入搜索文本，当我松开鼠标时，子菜单就会关闭，并且我无法输入搜索文本。请找到我的Plunker以供引用。有什么办法可以解决这个问题吗？
以下是我的子菜单代码:
<li class="dropdown-submenu"><a href>Filter Sub Menu</a>
<ul class="dropdown-menu">
<li>
<input type="text" ng-model="filterSearch">
</li>
<li ng-repeat="filt in savedFilterList|filter:filterSearch "> <a href> {{filt.filter_name}}</a>
</li>
</ul>
</li>
最佳答案
如果您必须执行子菜单，那么最简单的方法可能就是在 ng-click 上使用 $event.stopPropagation() 来获取输入的 li 元素。
您的 Plunker 有点困惑，其中包含 bootstrap.css、jQuery、bootstrap.js 和其他一些 jQuery 插件的多个副本。这肯定会影响事情是否有效，所以我删除了与这个问题无关的所有内容。
请记住，当您使用 UI Bootstrap 时，请勿加载 bootstrap.js。 UI Bootstrap 也不需要 jQuery(除非您需要它来包装在 AngularJS 包装器中的其他 jQuery 插件，否则不要加载它——我建议尽可能避免使用它)。
Plunker Demo
<body ng-controller="MainCtrl">
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn dropdown-toggle" dropdown-toggle>
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a>Apply</a>
</li>
<li>
<a>Cancel</a>
</li>
<li>
<a>Save</a>
</li>
<li>
<a>Save As</a>
</li>
<li class="dropdown-submenu">
<a>Filter Sub Menu</a>
<ul class="dropdown-menu">
<!--ADD $event.stopPropagation() to the li that wraps the search input-->
<li ng-click="$event.stopPropagation()" >
<div class="input-group">
<span class="input-group-addon">
<span class="sr-only">Search</span>
<span class="glyphicon glyphicon-search"></span>
</span>
<input type="text" class="form-control" ng-model="filterSearch">
</div>
</li>
<li ng-repeat="filt in savedFilterList|filter:filterSearch ">
<a>{{filt.filter_name}}</a>
</li>
</ul>
</li>
</ul>
</div>
关于javascript - 在 Angularjs 应用程序中，如果不按住鼠标单击，则无法搜索子菜单项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30118468/