javascript - unable to search submenu items without holding on to mouse click in Angularjs application -
i trying provide search text box sub menu. though working fine, need keep on holding mouse enter searching text, moment leave out mouse submenu closing , not able enter search text. please find plunker reference. there fix this?
the following 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>
if must submenu easiest thing use $event.stoppropagation() on ng-click li element input.
your plunker sort of hot mess multiple copies of bootstrap.css, jquery, bootstrap.js , other jquery plugin. that's bound affect whether things work or not, deleted not relevant question.
remember, when you're using ui bootstrap, not load bootstrap.js. jquery unnecessary ui bootstrap (don't load unless need other jquery plugin you're wrapping in angularjs wrapper -- recommend avoiding if @ 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() li wraps 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> 
Comments
Post a Comment