使用Bootstrap 3和AngularJS实现多选下拉框？

Question

使用Bootstrap 3和AngularJS实现多选下拉框？

javascriptjquerycssangularjstwitter-bootstrap

3

我正在尝试使用Bootstrap 3.0.2和AngularJS 1.2创建多选下拉框。我可以打开下拉框并进行多选，但是无法通过单击菜单外部的任何位置来关闭下拉框。目前，我将“Filter Selections”按钮视为打开和关闭下拉框的切换按钮，这不太用户友好。

我该如何使下拉框在单击菜单外部时关闭？

以下是我的代码：

<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>

我知道我需要以某种方式整合Bootstrap的代码：“.dropdown-backdrop”，以便在单击菜单外部时关闭下拉菜单。

Bootstrap 3 下拉菜单使用： http://getbootstrap.com/javascript/#dropdowns

- user3261623

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ara Hacobian · Accepted Answer

解决当前问题的一种方法是添加一个自定义指令来处理它。

因此，在“btn-group” div元素中添加一个指令属性，document-switch-off="openDropDown"，并在应用程序中添加以下指令。

<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>

指令代码：

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;
            }
        });
    }
}
]);

我有一个带有fiddle示例的链接，可以创建一个具有所需功能的自定义下拉菜单，我会找它。

无法找到原始plunk，但这里是一个快速示例：http://plnkr.co/Qijgpud12hPidKYlZbfS