Multiselect Dropdown using Bootstrap 3 and AngularJS?

Question

I am trying to create a multiselect dropdown using Bootstrap 3.0.2 and 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 3 Dropdown Usage: http://getbootstrap.com/javascript/#dropdowns

Ara Hacobian · Accepted Answer · 2014-02-02 03:01:59Z

3

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.

<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

edited Feb 2, 2014 at 3:01

answered Feb 2, 2014 at 2:33

Ara Hacobian

1211 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ara Hacobian Over a year ago

I actually had the original saved as a template. I didn't create it but might help if you need to reference it. plunkr

user3261623 Over a year ago

Thank you so much! I simply plugged in your directive and everything works perfectly. It was exactly what I needed! Thanks again!!!

Sujit Y. Kulkarni Over a year ago

Hi @AraHacobian your solution works great. But what if I have more than one dropdowns? In that case, this triggers all the drop downs on click of any one of them. See here - plnkr.co/edit/UTw9Zw?p=preview

Collectives™ on Stack Overflow

Multiselect Dropdown using Bootstrap 3 and AngularJS?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related