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.

回答1:

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>

回答2:

I recommend to use the $select service in a custom directive instead of trying to hack your way around by clicking programmatically.

You can then access ui-select's built in actions like
$select.toggle() for toggling the dropdown
$select.activate() for opening and
select.close() for closing the dropdown.

myModule.directive('myUiSelect', function() {
  return {
    require: 'uiSelect',
    link: function(scope, element, attrs, $select) {
      $select.activate(); // call this by an event handler
    }
  };
});

And in your template

<ui-select my-ui-select>
  ...
</ui-select>

See reference: https://github.com/angular-ui/ui-select/wiki/Accessing-$select

回答3:

Maybe you can bind a property to the size attribute of the dropdownlist. Set the property to a number like "6" to make it appear as if it was opening and back to "1" when you want it to collapse. Otherwise I'm not sure there's any other way. See reference here.

回答4:

I found also another solution, ie. to test ui-select with capibara and jQuery:

$('.ui-select-container').scope().$select.open = true;
$('.ui-select-container').find('.ui-select-choices-row').first().find('a').click();

回答5:

Accessing $select with require: 'uiSelect' does not work.

Try $elem.find('input').click() to open and $('body').click() to close the ui.

回答6:

An example developed for you as below

<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        function showUser(){
            var siz = $("#sem option").length;
            if($("#sem").attr("size")!=siz){
            $("#sem").attr('size',siz);
            }else{
            $("#sem").attr('size',1);
            }
        }
    </script>
    </head>
    <body>
    <select name='sem' id = 'sem' style = 'margin-left: 3.4em;' class = 'shor_list'>
                    <option value='Null'>------Select Semester------</option>
                    <option value='1st'>1st</option>
                    <option value='2nd'>2nd</option>
                    <option value='3rd'>3rd</option>
                    <option value='4th'>4th</option>
                    <option value='5th'>5th</option>
                    <option value='6th'>6th</option>
                    <option value='7th'>7th</option>
                    <option value='8th'>8th</option>
                    </select>
    <span onclick="showUser();">update list</span>
    </body>
</html>

but there seems to be a better way but, you gotta pay for it LINK

来源：https://stackoverflow.com/questions/26741519/how-to-manually-toggle-angular-ui-select-dropdown

标签

javascript

jquery

angularjs

angular-ui