CODEWITHSUNDEEP
javascriptjqueryangularjsangular-ui
Schlaus
Schlaus

Reputation: 19212

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.

Upvotes: 6

Views: 12283

Answers (6)

Mateen
Mateen

Reputation: 1671

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

Upvotes: 0

Harrison Powers
Harrison Powers

Reputation: 359

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

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

Upvotes: 0

Darex1991
Darex1991

Reputation: 897

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();

Upvotes: 0

David Salamon
David Salamon

Reputation: 2451

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

Upvotes: 8

Asik
Asik

Reputation: 7977

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>

Upvotes: 8

mikelt21
mikelt21

Reputation: 2768

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.

Upvotes: 1

Related Questions