Close multiselect dropdown when user clicks outside (different situation)

Question

Please refer to this jsfiddle. http://jsfiddle.net/jaredwilli/vUSPu/

This is for multi select dropdown. User selects options available in the drop and clicks outside the dropdown menu. The dropdown list doesnt close unless you click on the dropdown menu itself.

Is there any way to hide the dropdown when user clicks anywhere else away from dropdown list.

<div ng-app="myApp" ng-controller="AppCtrl">    
<dropdown-multiselect pre-selected="member.roles" model="selected_items" options="roles"></dropdown-multiselect>


<pre>selected roles = {{selected_items | json}}</pre>

'use strict';

var app = angular.module('myApp', ['app.directives']);

app.controller('AppCtrl', function($scope){                     
$scope.roles = [
      {"id": 1, "name": "Manager", "assignable": true},
      {"id": 2, "name": "Developer", "assignable": true},
      {"id": 3, "name": "Reporter", "assignable": true}
];

$scope.member = {roles: []};
$scope.selected_items = [];
});

var app_directives = angular.module('app.directives', []);

app_directives.directive('dropdownMultiselect', function(){
return {
   restrict: 'E',
   scope:{           
        model: '=',
        options: '=',
        pre_selected: '=preSelected'
   },
   template: "<div class='btn-group' data-ng-class='{open: open}'>"+
    "<button class='btn btn-small'>Select</button>"+
            "<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><span class='caret'></span></button>"+
            "<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>" + 
                "<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i>  Check All</a></li>" +
                "<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i>  Uncheck All</a></li>" +                    
                "<li class='divider'></li>" +
                "<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>" +                                        
            "</ul>" +
        "</div>" ,
   controller: function($scope){

       $scope.openDropdown = function(){        
                $scope.selected_items = [];
                for(var i=0; i<$scope.pre_selected.length; i++){                        $scope.selected_items.push($scope.pre_selected[i].id);
                }                                        
        };

        $scope.selectAll = function () {
            $scope.model = _.pluck($scope.options, 'id');
            console.log($scope.model);
        };            
        $scope.deselectAll = function() {
            $scope.model=[];
            console.log($scope.model);
        };
        $scope.setSelectedItem = function(){
            var id = this.option.id;
            if (_.contains($scope.model, id)) {
                $scope.model = _.without($scope.model, id);
            } else {
                $scope.model.push(id);
            }
            console.log($scope.model);
            return false;
        };
        $scope.isChecked = function (id) {                 
            if (_.contains($scope.model, id)) {
                return 'icon-ok pull-right';
            }
            return false;
        };                                 
   }
   } 
});

can someone pls confirm if they are able to open the fiddle. ? — Ayesha, Nov 18 '15 at 01:12

score 0 · Accepted Answer · edited May 23 '17 at 10:27

0

I've tried your jsFiddle i see what you mean. I think this would help you.

With a little bit of searching alot can be found :)

AngularJS dropdown directive hide when clicking outside

edited May 23 '17 at 10:27

Community

1
1

answered Nov 18 '15 at 01:14

Dylan Wijnen

219
3
13

1

That's not going to work. As per the documentation, there is no such event to close on select. http://dotansimha.github.io/angularjs-dropdown-multiselect/#/ – DinoMyte Nov 18 '15 at 01:16
@DinoMyte- As per Dylans link, i get an error probably due to mixing between link and controller. It didnt work somehow. Do you have any suggestions ?: – Ayesha Nov 18 '15 at 01:21
1

The link DinoMyte send me i looked around and found. "closeOnBlur" option the description says : Indicates if the dropdown should close when clicking outside of it's scope. – Dylan Wijnen Nov 18 '15 at 01:22
@DylanWijnen- do u know how to use it in my fiddle ? i saw one link and they mentioned that they can use closeOnBlur. https://github.com/dotansimha/angularjs-dropdown-multiselect/pull/18 – Ayesha Nov 18 '15 at 01:30
got it. $scope.settings = {closeOnBlur: true } – Ayesha Nov 18 '15 at 01:32
Thanks Dylan and Dino. – Ayesha Nov 18 '15 at 01:32

Close multiselect dropdown when user clicks outside (different situation)

1 Answers1