CODEWITHSUNDEEP
angularjs
Gabriel
Gabriel

Reputation: 611

how to implement click away function with angular js in drop down button

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.

Upvotes: 4

Views: 1866

Answers (1)

Gabriel
Gabriel

Reputation: 611

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.

Upvotes: 1

Related Questions