unable to search submenu items without holding on to mouse click in Angularjs application
Question
I am trying to provide search text box for sub menu. Even though it is working fine, I need to keep on holding the mouse to enter the searching text, the moment I leave out the mouse the submenu is closing and I am not able to enter my search text. Please find my Plunker for reference. Is there any fix for this?
The following is my sub menu code:
<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>
2 answers
solution1
1 2015-05-08 14:09:59
If you must do a submenu then probably the easiest thing is to just use $event.stopPropagation() on the ng-click for the li element with your input.
Your Plunker was sort of a hot mess with multiple copies of the bootstrap.css, jQuery, bootstrap.js and some other jQuery plugin. That's bound to affect whether things work or not, so I deleted everything that was not relevant to this question.
Remember, when you're using UI Bootstrap, do not load bootstrap.js. jQuery is also unnecessary with UI Bootstrap (don't load it unless you need it for some other jQuery plugin that you're wrapping in an AngularJS wrapper -- which I recommend avoiding if at all possible).
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>
solution2
0 2015-05-08 14:28:52
Stop click event on search box.
(function(){
app.directive('stopEvent', function () {
return {
restrict: 'A',
link: function (scope, element, attr) {
element.bind('click', function (e) {
e.stopPropagation();
});
}
};
});
}());
<ul class="dropdown-menu">
<li>
<input type="text" ng-model="filterSearch" stop-event>
</li>
<li ng-repeat="filt in ui3DataSet.savedFilterList | filter:filterSearch"> <a href ng-click="getDataBasedonFilter(filt)"> {{filt.filter_name}}</a>
</li>
</ul>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.