当用户单击外部时关闭多选下拉列表(不同情况)

Question

请参阅此jsfiddle。http://jsfiddle.net/jaredwilli/vUSPu/

这是用于多选下拉列表。用户选择下拉菜单中可用的选项，然后在下拉菜单外单击。除非单击下拉菜单本身，否则下拉列表不会关闭。

当用户单击下拉列表之外的任何位置时，是否有任何方法可以隐藏下拉列表。

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

Answer 1

我试过你的jsFiddle，明白你的意思了。我想这会对你有所帮助。

只要稍微搜索一下，就可以找到很多：）

AngularJS下拉指令在外部单击时隐藏