我正在使用AngularUI的ui-select在一个页面上创建多个选择。当用户点击页面上的按钮时,我需要能够打开下拉列表。
我曾尝试在元素上使用jQuery的.click()
和.toggle('click')
,但当在按钮的ng-click
函数中调用时,会导致$apply already in progress
错误。不过,当从Chrome的控制台调用时,它们可以工作。ng-click
中的函数除了模拟另一次点击之外,什么都不做。
.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();
});
});
}
};
});
将此属性指令添加到按钮
<button id="btn" open-menu-by-click="searchBarArea">Click me</button>
我建议在自定义指令中使用$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
也许您可以将属性绑定到dropdownlist的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
不起作用。
尝试$elem.find('input').click()
打开ui,$('body').click()
关闭ui。
为您开发的示例如下
<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>
但似乎有更好的方法,但是,你必须为此付费链接