javascript 如何手动切换 angular-ui-select 下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26741519/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to manually toggle angular-ui-select dropdown
提问by Schlaus
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.
我正在使用 AngularUI 的 ui-select 在页面上创建多个多选。当用户单击页面上的按钮时，我需要能够打开下拉列表。
I've tried using jQuery's .click()and .toggle('click')on the element, but these result in a $apply already in progresserror when called by in the button's ng-clickfunction. They work when called from Chrome's console though. The function in ng-clickdoesn't do anything besides simulating another click.
我试过在元素上使用 jQuery.click()和.toggle('click')，但是$apply already in progress在按钮的ng-click函数中调用时会导致错误。不过，它们在从 Chrome 的控制台调用时工作。ng-click除了模拟另一次点击之外，函数 in不做任何事情。
.focus()doesn't do anything, besides focusing the input.
.focus()除了聚焦输入之外，什么都不做。
I also reluctantly tried a nasty hack, where I used the select's ng-initto 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.
我也很不情愿地尝试了一个讨厌的黑客，在那里我使用选择ng-init将它的控制器存储到按钮可以访问的范围，然后使用控制器toggle()和activate()方法。这将焦点放在输入上，但关联的下拉列表不会打开。
How can I toggle the dropdown manually, from outside the ui-select element's context?
如何从 ui-select 元素的上下文之外手动切换下拉菜单？
回答by Asik
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>
回答by David Salamon
I recommend to use the $select service in a custom directive instead of trying to hack your way around by clicking programmatically.
我建议在自定义指令中使用 $select 服务，而不是试图通过以编程方式单击来绕过。
You can then access ui-select's built in actions like$select.toggle()for toggling the dropdown$select.activate()for opening andselect.close()for closing the dropdown.
然后，您可以访问 ui-select 的内置操作，例如$select.toggle()切换下拉列表$select.activate()以打开和select.close()关闭下拉列表。
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
见参考：https: //github.com/angular-ui/ui-select/wiki/Accessing-$select
回答by mikelt21
Maybe you can bind a property to the sizeattribute 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.
也许您可以将属性绑定到size下拉列表的属性。将该属性设置为类似“6”的数字，使其看起来好像正在打开，并在您希望它折叠时恢复为“1”。否则我不确定还有其他方法。请参阅此处的参考。
回答by Mateen
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
但似乎有更好的方法，但是，您必须为此付费LINK
回答by Darex1991
I found also another solution, ie. to test ui-select with capibara and jQuery:
我还找到了另一个解决方案，即。使用 capibara 和 jQuery 测试 ui-select：
$('.ui-select-container').scope().$select.open = true;
$('.ui-select-container').find('.ui-select-choices-row').first().find('a').click();
回答by Harrison Powers
Accessing $selectwith require: 'uiSelect'does not work.
访问$select与require: 'uiSelect'不起作用。
Try $elem.find('input').click()to open and $('body').click()to close the ui.
尝试$elem.find('input').click()打开和$('body').click()关闭用户界面。
