user3632106 user3632106 - 5 months ago 91
AngularJS Question

Close dropdown menus on click on other menu item or body (Angularjs)

Can anyone help me? I have various dropdown menus on my application and I'am trying to close them on click on other menu items and on click on body. I'am using angular.js without jQuery.

html

<div ng-controller="SomeController as controller">
<div class="select-box">
<div class="select-box-field" ng-click="dropdown = !dropdown;">
<span>Menu Name</span>
</div>
<div class="select-box-field-dropdown" ng-class="{ 'is-active':dropdown }">
<span>Dropdown menu Item 1</span>
<span>Dropdown menu Item 2</span>
</div>
</div>




Controller

(function() {

var app = angular.module('application');

app.controller('SomeController', someCtrl);

function someCtrl () {

var vm = this;
vm.dropdown = false;

};
})();


Here is the fiddle http://jsfiddle.net/aafvxmbn/2/

Answer

Update

You can call the same unction from the container and call $event.stopPropagation()

See this updated fiiddle You can set dropdown value in ng-click

<div class="select-box-field" ng-click="change(1)">

or

<div class="select-box-field" ng-click="change(1)">

and in controller the function change()

.controller("Ctrl1", function($scope, $element)
  {
      $scope.dropdown=0;
      $scope.change = function(a) {

            $scope.dropdown=a;
      }

  })

see this fiddle for full working demo

Comments