Schlaus Schlaus - 2 months ago 44
AngularJS Question

How to manually toggle angular-ui-select dropdown

I'm using AngularUI's ui-select to create several multiselects on a page. I need to be able to open the dropdown list when a user clicks on a button on the page.

I've tried using jQuery's

.click()
and
.toggle('click')
on the element, but these result in a
$apply already in progress
error when called by in the button's
ng-click
function. They work when called from Chrome's console though. The function in
ng-click
doesn't do anything besides simulating another click.

.focus()
doesn't do anything, besides focusing the input.

I also reluctantly tried a nasty hack, where I used the select's
ng-init
to store it's controller to a scope the button has access to, and then using the controller's
toggle()
and
activate()
methods. This gave focus to the input, but the associated dropdown list wont open.

How can I toggle the dropdown manually, from outside the ui-select element's context?

Here's a Plunker you can play with.

Answer

I have tried and could be achieved by directive method. working fiddle

angular
  .module('myApp', [
    'ngSanitize',
    'ui.select'
  ])
  .controller('testController', function ($scope) {
    $scope.things = ['item1', 'item2'];
    $scope.clickOnInput = function() {
      //jQuery('#searchBarArea').click();
    };
  })
  .directive('openMenuByClick', function ($timeout) {
    return {
        link: function (scope, element, attrs) {
               element.bind('click', function () {

                 $timeout(function () {
                     $("#"+attrs.openMenuByClick).find('input').click();
                });


            });
        }
    };
});

Add this attribute directive to your button

<button id="btn" open-menu-by-click="searchBarArea">Click me</button>