Div to behave like Select dropdown using Angular

Question

I have a UI requirement where a user needs to be able to click on an element, display its options, and the options are checkbox inputs.

So, a 'select' element that allows multiple checkbox inputs.

               <div class="select-custom" ng-click="selectToggle = !selectToggle">
                    <div ng-show="all(x)">All Options<span class="arr"></span></div>
                    <div ng-show="!all(x) && !notAllowed(x)">Selected Options<span class="arr"></span></div>
                    <div ng-show="notAllowed(x)">No Options Selected<span class="arr"></span></div>
                </div>
                <ul class="list-unstyled select-custom-options" ng-show="selectToggle">
                    <li ng-repeat="option in options">
                        <input type="checkbox" value="{{option.Name}}" ng-model="option.Allow">{{option.Name}}
                    </li>
                </ul>

The div is styled like a select input and the ul contains the options. Everything works well, except that you need to click the div in order to hide the ul. Normally, a select element will close if you click outside the options.

Suggestions on how to add that behavior to an element like this?

Checkout: http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element — tymeJV, Jan 21 '16 at 19:35
There is a directive that is very similar to your example. http://dotansimha.github.io/angularjs-dropdown-multiselect/#/ It has an explicit flag 'closeOnBlur' that you can set to false. — jcc, Jan 21 '16 at 19:41

score 0 · Answer 1 · edited May 23 '17 at 11:59

    $(document).mouseup(function (e)
{
    var container = $("YOUR CONTAINER SELECTOR");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

From This answer

Edit the container.hide to something like this

container.attr('ng-show', 'false')

I think that will work ;)

Div to behave like Select dropdown using Angular

1 Answers1