如何手动切换angular-ui-select下拉列表
我正在使用AngularUI的ui-select在页面上创建多个多选。 当用户点击页面上的按钮时，我需要能够打开下拉列表。
我已经尝试在元素上使用jQuery的.toggle('click') .click()和.toggle('click') ，但是当按钮的ng-click函数调用时，这会导致$apply already in progress 。 它们在从Chrome控制台调用时工作。 除了模拟另一次点击之外， ng-clickfunction不会执行任何操作。
除了聚焦输入外， .focus()不做任何事情。
我也不情愿地尝试了一个讨厌的黑客，我使用select的ng-init将它的控制器存储到按钮可以访问的范围，然后使用控制器的toggle()和activate()方法。 这使得重点放在输入上，但相关的下拉列表不会打开。
如何从ui-select元素的上下文外部手动切换下拉列表？
这是你可以玩的Plunker。
我试过并且可以通过指令方法实现。 工作小提琴
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(); }); }); } }; });
将此属性指令添加到按钮
我建议在自定义指令中使用$ select服务，而不是通过以编程方式单击来试图破解。
然后，您可以访问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 } }; });
并在您的模板中
...
参见参考： https ： //github.com/angular-ui/ui-select/wiki/Accessing-$select
也许您可以将属性绑定到下拉列表的size属性。 将属性设置为“6”之类的数字，使其显示为打开时，如果要折叠，则返回“1”。 否则我不确定还有其他办法。 请参阅此处的参考
我发现了另一个解决方案，即。 使用capibara和jQuery测试ui-select：
$('.ui-select-container').scope().$select.open = true; $('.ui-select-container').find('.ui-select-choices-row').first().find('a').click();
使用require: 'uiSelect'访问$select require: 'uiSelect'不起作用。
尝试$elem.find('input').click()打开和$('body').click()关闭ui。
为您开发的示例如下
update list
但似乎有一个更好的方法，但是，你必须为它支付LINK