Angular toggle custom dropdown

Question

I have a custom dropdown selector. I want to Toggle the dropdown when i click anywhere else on browser. toggleModules() is working 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);
});

here you can see the answer dropdown custom

neel upadhyay
– neel upadhyay

2023-06-27 08:28:01 +00:00
Commented Jun 27, 2023 at 8:28 — neel upadhyay
– neel upadhyay, Commented Jun 27, 2023 at 8:28

Sumit Ridhal · Accepted Answer · 2017-06-29 14:36:32Z

1

Thanks guys. I got a solution working fine for me.

$document.on('click', function(event) {
    event.preventDefault();
    event.stopPropagation();
    $scope.$apply(function() {
        $scope.showModules = false;
    });
    $document.off('click', event);
});

answered Jun 29, 2017 at 14:36

Sumit Ridhal

1,4093 gold badges15 silver badges30 bronze badges

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

Comments

Amadou Beye · Accepted Answer · 2017-05-18 15:06:02Z

0

You can create a new click-off directive that can check a click outside of a div and then do whatever you want

myApp.directive('clickOff', function($parse, $document) {
var dir = {
    compile: function($element, attr) {
      // Parse the expression to be executed
      // whenever someone clicks _off_ this element.
      var fn = $parse(attr["clickOff"]);
      return function(scope, element, attr) {
        // add a click handler to the element that
        // stops the event propagation.
        element.bind("click", function(event) {
          console.log("stopProp");
          event.stopPropagation();
        });
        angular.element($document[0].body).bind("click",                                                                 function(event) {
            console.log("cancel.");
            scope.$apply(function() {
                fn(scope, {$event:event});
            });
        });
      };
    }
  };
  return dir;
});

Here's a fiddle

answered May 18, 2017 at 15:06

Amadou Beye

2,8583 gold badges21 silver badges41 bronze badges

1 Comment

Sumit Ridhal Over a year ago

Thats great. But i'm looking for solution to handdle the same in current controller. Any suggestion??

Collectives™ on Stack Overflow

Angular toggle custom dropdown

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related