如何手动切换 angular-ui-select 下拉菜单
Posted
技术标签:
【中文标题】如何手动切换 angular-ui-select 下拉菜单【英文标题】:How to manually toggle angular-ui-select dropdown 【发布时间】:2014-12-31 17:15:55 【问题描述】:我正在使用 AngularUI 的 ui-select 在页面上创建多个多选。当用户点击页面上的按钮时,我需要能够打开下拉列表。
我尝试在元素上使用 jQuery 的 .click()
和 .toggle('click')
,但是当在按钮的 ng-click
函数中调用时,这些会导致 $apply already in progress
错误。但是,当从 Chrome 的控制台调用它们时它们可以工作。 ng-click
中的函数除了模拟另一次点击之外没有任何作用。
.focus()
不做任何事情,除了聚焦输入。
我也很不情愿地尝试了一个讨厌的 hack,我使用 select 的 ng-init
将它的控制器存储到按钮可以访问的范围内,然后使用控制器的 toggle()
和 activate()
方法。这为输入提供了焦点,但相关的下拉列表不会打开。
如何从 ui-select 元素的上下文之外手动切换下拉菜单?
Here's a Plunker you can play with.
【问题讨论】:
你能做一个小提琴以便更好地理解 @Asik 添加了问题的链接 【参考方案1】:我已经尝试过,可以通过指令的方法来实现。工作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();
);
);
;
);
将此属性指令添加到您的按钮
<button id="btn" open-menu-by-click="searchBarArea">Click me</button>
【讨论】:
谢谢,这是一个完美的解决方案! 游戏有点晚了,但是使用 ui-select 0.19.5,以下对我有用:$("#"+attrs.clickUiSelect).find('span')[0].click();
【参考方案2】:
我建议在自定义指令中使用 $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
;
);
在你的模板中
<ui-select my-ui-select>
...
</ui-select>
见参考:https://github.com/angular-ui/ui-select/wiki/Accessing-$select
【讨论】:
【参考方案3】:也许您可以将属性绑定到下拉列表的size
属性。将属性设置为“6”之类的数字,使其看起来好像正在打开,并在您希望它折叠时返回“1”。否则我不确定还有其他方法。请参阅参考here。
【讨论】:
感谢您的回答,但我实际上没有选择元素来执行此操作。请查看我添加到问题中的 Plunker。【参考方案4】:我还找到了另一种解决方案,即。用 capibara 和 jQuery 测试 ui-select:
$('.ui-select-container').scope().$select.open = true;
$('.ui-select-container').find('.ui-select-choices-row').first().find('a').click();
【讨论】:
【参考方案5】:使用require: 'uiSelect'
访问$select
不起作用。
尝试$elem.find('input').click()
打开并尝试$('body').click()
关闭用户界面。
【讨论】:
【参考方案6】:为您开发的示例如下
<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>
但似乎有更好的方法,但你得付钱LINK
【讨论】:
以上是关于如何手动切换 angular-ui-select 下拉菜单的主要内容,如果未能解决你的问题,请参考以下文章