All geek questions in one place

How to manually switch the angular -ui-select dropdown

I am using AngularUI ui-select to create multiple multi-selections per page. I need to open a dropdown when a user clicks a button on a page.

I tried using jQuery .click() and .toggle('click') for the element, but this results in a $apply already in progress error when called in the ng-click function. However, they work when called from the Chrome console. The function in ng-click does nothing but simulate another click.

.focus() does nothing but focus input.

I was also reluctant to try a nasty hack where I used select ng-init to store its controller in the area the button has access to, and then using the toggle() and activate() controller methods. This focused on input, but the linked dropdown does not open.

How can I switch the drop-down list manually, outside the context of the ui-select element?

Here you can play with the plunger.

+5
source share
6 answers

I tried and could be achieved using the directory method. violin

 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>
+7
source

I recommend using the $ select service in a custom directive instead of trying to crack your path by clicking programmatically.

Then you can access the ui-select built into the actions, for example, $select.toggle() to switch the drop-down list $select.activate() to open and select.close() to close the drop-down list.

 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 link: https://github.com/angular-ui/ui-select/wiki/Accessing-$select

+6
source

Perhaps you can bind the property to the size attribute in the drop-down list. Set the property to a number like "6" so that it looks like it was open and back to "1" when you want it to crash. Otherwise, I am not sure of anything else. See link here .

+1
source

An example designed for you as shown 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 it seems to be the best way, but you have to pay LINK for it

0
source

I found another solution, i.e. to check 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();
0
source

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

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

0
source

Source: https://habr.com/ru/post/1206183/

More articles:


All Articles