[英]Multiselect Dropdown using Bootstrap 3 and AngularJS?
I am trying to create a multiselect dropdown using Bootstrap 3.0.2 and AngularJS 1.2. 我正在尝试使用Bootstrap 3.0.2和AngularJS 1.2创建多选下拉列表。 I can get the dropdown box to open and multiselection to work.
我可以打开下拉框并进行多项选择。 However, what is not working is that when I click anywhere outside the menu it doesn't close.
但是,不起作用的是,当我点击菜单外的任何地方时,它都不会关闭。 As of now, I am treating the "Filter Selections" button as a toggle to open and close the dropdown box, which isn't very user-friendly.
截至目前,我正在将“过滤器选择”按钮视为一个切换,以打开和关闭下拉框,这不是非常用户友好。
How can I make the dropdown box to close when I click outside the menu? 当我点击菜单外部时,如何关闭下拉框?
This is what I have so far: 这是我到目前为止:
<div class="btn-group" data-ng-class="{open: openDropDown}">
<button class="btn btn-default" type="button" data-ng-click="openDropDown=!openDropDown">Filter Selections<span class="caret"></span></button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu">
<li><a href="">Item #1<span class="glyphicon glyphicon-ok-sign pull-right"></span></a></li>
<li><a href="">Item #2<span class="glyphicon glyphicon-ok-sign pull-right"></span></a></li>
<li><a href="">Item #3<span class="glyphicon glyphicon-ok-sign pull-right"></span></a></li>
<li><a href="">Check All</a></li>
<li><a href="">Uncheck All</a></li>
</ul>
</div>
I know I need to somehow incorporate bootstrap's code: ".dropdown-backdrop" to close dropdown menus when clicking outside the menu. 我知道我需要以某种方式合并bootstrap的代码:“。dropdown-backdrop”以在菜单外单击时关闭下拉菜单。
Bootstrap 3 Dropdown Usage: http://getbootstrap.com/javascript/#dropdowns Bootstrap 3 Dropdown用法: http : //getbootstrap.com/javascript/#dropdowns
One solution to fix it with what you currently have is to add a custom directive to handle that. 使用您目前拥有的解决方案的一个解决方案是添加自定义指令来处理它。
so add a directive attribute to the "btn-group" div element, document-switch-off="openDropDown" and add following directive to app. 所以将一个指令属性添加到“btn-group”div元素,document-switch-off =“openDropDown”并将以下指令添加到app。
<div class="btn-group" data-ng-class="{open: openDropDown}" document-switch-off="openDropDown">
<button class="btn btn-default" type="button" data-ng-click="openDropDown=!openDropDown">Filter Selections<span class="caret"></span></button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu">
<li><a href="">Item #1<span class="glyphicon glyphicon-ok-sign pull-right"></span></a></li>
<li><a href="">Item #2<span class="glyphicon glyphicon-ok-sign pull-right"></span></a></li>
<li><a href="">Item #3<span class="glyphicon glyphicon-ok-sign pull-right"></span></a></li>
<li><a href="">Check All</a></li>
<li><a href="">Uncheck All</a></li>
</ul>
</div>
Directive code: 指令代码:
angular.module('app')
.directive('documentSwitchOff', [
'$parse',
'$timeout',
function ($parse,$timeout) {
return function (scope, element, attrs) {
var getter = $parse(attrs.documentSwitchOff);
var setter = getter.assign;
var clickInsideElement = false;
function elementClickHandler(){
clickInsideElement = true;
}
function documentClickHandler(){
if(!clickInsideElement){
scope.$apply(function(){
setter(scope,false);
});
}
clickInsideElement = false;
}
var bound = false;
scope.$watch(attrs.documentSwitchOff,function(newVal){
if(angular.isDefined(newVal)){
if(newVal){
$timeout(function(){
bound = true;
element.bind("click",elementClickHandler);
var doc = angular.element(document)
doc.bind('click',documentClickHandler);
},0);
}
else{
if(bound){
element.unbind("click",elementClickHandler);
angular.element(document).unbind('click',documentClickHandler);
bound = false;
}
}
}
});
scope.$on("$destroy",function(){
if(bound){
element.unbind("click",elementClickHandler);
angular.element(document).unbind('click',documentClickHandler);
bound = false;
}
});
}
}
]);
I had a link with a fiddle example to create a custom dropdown with the functionality you like, ill look for it. 我有一个小提琴示例的链接,用你喜欢的功能创建一个自定义下拉列表,生病寻找它。
can't find original plunk, but here is quick example: http://plnkr.co/Qijgpud12hPidKYlZbfS 找不到原始的插件,但这里有一个简单的例子: http : //plnkr.co/Qijgpud12hPidKYlZbfS
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.