I've implemented a custom dropdown selector with the functionality to toggle when clicked anywhere else on the browser. The toggleModules() function is responsible for handling the toggling within the dropdown.
Data:
modules=["A", "B", "C", "D", "E", "F"]<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12">
<div class="vov-filters ov-filter-region">
<span ng-click="toggleModules($event)"><label>Module</label>
<b id="caret-glyph" class="glyphicon glyphicon-chevron-down pull-right" area-hidden="true"></b>
</span>
<div id="el1" class="overlay bordered" ng-if="showModules">
<span role="button" ng-click="clearSelectedModules()" class="clear">Clear</span>
<div class="filter-checkbox" ng-repeat="entry in modules" ng-click="moduleFilter(entry)">
<label>
<input ng-show="entry.show" type="checkbox" ng-model="entry.show">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
{{entry.name}}
</label>
</div>
</div>
</div>
</div>
controller: Toggle fn -
$scope.toggleModules = function(ev) {
ev.preventDefault();
ev.stopPropagation();
$scope.showModules = !$scope.showModules;
if ($scope.showModules) {
$scope.overlay = true;
} else {
$scope.overlay = false;
}
};
Same Contoller: $document Click Event:
$document.on('click', function(event) {
<!-- Start Toggle Module filter -->
$scope.toggleModules(event)
<!-- End Toggle Module filter -->
return $document.off('click', event);
});