Close a selectbox when clicking outside of it

Question

I've created a cool select box in Angularjs , all the codes works fine with no problem , the only problem that I'm facing with no luck to solve it is this :

Let say below is my select box markup :

 <div id="selectBoxContainer" ng-click="isOpen=!isOpen">
    <span>Title</span>
   <input type="text" ng-model="q">
 </div>
  <ul id ="selectboxResult" ng-show="isOpen">
     <li ng-repeat="r in result">{{r}}</li>
  </ul>

So far it works and and when I click on this div or any child of it ( lets say that title element) , the ul will toggle show and hide.

Problem :

When I click outside of this div ( anywhere outside ) I want this select box to be closed ( isOpen=false) , I know that I have to catch the document.click event and do something with that , but I'm not sure how to use it.

http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element — Hearner, Jul 24 '15 at 06:34
Something to think of: does your select box mimic all the accessibility functionality of a standard one and work as consistently across all browsers? — Toni Leigh, Jul 24 '15 at 06:36
@Hearner , Thanks , the answer does the job , maybe you should mark this question as duplicate ? — , Jul 24 '15 at 06:53

score 0 · Answer 1 · answered Jul 24 '15 at 06:38

0

Try with the below link if it works with you.

http://plnkr.co/edit/4J7jBQ?p=preview

<select ng-model='selectedIndex' ng-class="disabled"}}">
<option ng-repeat='student in students' value='{{$index}}'>
   {{student.id}} - {{student.name}}
</option>

answered Jul 24 '15 at 06:38

1

I don't think this is the answer to this question , because the question itself does not mention of using the select element of html – Milad Jul 24 '15 at 06:54

Close a selectbox when clicking outside of it

1 Answers1