4

I want to use the drop down button in my application and I'm using angularjs. When I click the drop down button and click away, I want the drop down list to disappear.

In angular, there's an ng-blur directive for this. I added the ng-blur to my button. When I click something in the drop down list, it seems to trigger the ng-blur.

I cannot click the things inside drop down list. I tried to add a div outside and add ng-blur for this whole div but it still didn't work. I'm not using angularstrap bs-select, ng-options as I want to make datacalls when I select in the drop down list. How can I implement the click away function for the drop down button? Not necessary to use ng-blur. Thanks.

<div class="btn-group">
   <button type="button" class="btn btn-default" ng-blur="closedropdownlist">Default</button>
      <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
   </ul>
</div>

Here's the Plunker Demo for it, http://plnkr.co/edit/OuiZqajYD3ZdrOwSLLSn?p=preview I'd like for the dropdown list to disappear when I click away from the dropdown button. I also want to enable the ng-click function inside the dropdown list. So I'm not using the ng-options and ng-model.

Richard Hamilton
  • 25,478
  • 10
  • 60
  • 87
Gabriel
  • 601
  • 1
  • 10
  • 26
  • Can you add a plunker demo? – gsalisi Mar 27 '15 at 04:25
  • Check this : http://stackoverflow.com/questions/14574365/angularjs-dropdown-directive-hide-when-clicking-outside – roxid Mar 27 '15 at 09:41
  • @gsalisi Thanks, here's the plunk demo for this. http://plnkr.co/edit/OuiZqajYD3ZdrOwSLLSn?p=preview What I want to do is when I click away from the dropdown button the dropdown list could disappear. And I also want ng-click enabled inside the dropdown list – Gabriel Mar 27 '15 at 16:50
  • @user4703663 why don't you just use bootstrap to create a dropdown? it's overcomplicated to do it with angular, when you have bootstrap anyway. – gsalisi Mar 28 '15 at 06:56
  • @gsalisi I have to bind the data to the view by using angular js. so i have to use angular js. and i have submitted the solution and it works. bootstrap won't have this data binding function – Gabriel Mar 29 '15 at 07:09

1 Answers1

1

In reference to the following stackoverflow: Using ng-blur and ui-sref doesn't work as expected, it seems that the click event happened before the blur event. To trigger the click event before blur event, I could use ng-mousedown and this happened before the blur event. And my problem is solved.

Community
  • 1
  • 1
Gabriel
  • 601
  • 1
  • 10
  • 26