如何手动切换angular-ui-select下拉菜单

我正在使用AngularUI的ui-选择在页面上创建多个多选。当用户点击页面上的按钮时，我需要能够打开下拉列表。如何手动切换angular-ui-select下拉菜单

我使用jQuery的.click()和.toggle('click')的元素，但这些结果时按钮的功能ng-click称为$apply already in progress错误尝试。当他们从Chrome的控制台调用时，他们仍然工作。除了模拟另一次点击之外，ng-click中的功能不会执行任何操作。

.focus()除了关注输入外，什么都不做。

我也勉强尝试了讨厌的黑客，我曾经选择的ng-init来存储它的控制器的范围按钮访问，然后使用控制器的toggle()和activate()方法。这给了输入焦点，但关联的下拉列表不会打开。

如何从ui-select元素的上下文外部手动切换下拉菜单？

Here's a Plunker you can play with.

来源

2014-11-04 Schlaus

你可以让小提琴更好地理解 – Asik 2014-11-04 17:50:53

@Asik添加到问题的链接 – Schlaus 2014-11-04 18:23:00

我曾尝试和可以通过指令的方法来实现。工作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>

来源

2014-11-04 18:57:27 Asik

谢谢，这是一个完美的解决方案！ – Schlaus 2014-11-04 19:59:24

欢迎。很高兴帮助.. :) – Asik 2014-11-04 20:06:35

游戏有点迟，但用ui-select 0.19.5，以下工作适用于我：'$（“＃”+ attrs.clickUiSelect）.find（'span'）[0 ]。点击（）;' – twip 2017-04-06 20:52:11

也许你可以绑定属性的下拉列表的size属性。将属性设置为像“6”这样的数字，使其看起来好像是打开的，并在您想要折叠时回到“1”。否则我不确定还有其他方法。见参考文献here。

来源

2014-11-04 17:53:07 mikelt21

感谢您的答案，但我实际上没有一个选择元素来做到这一点。请参阅我向问题添加的Plunker。 – Schlaus 2014-11-04 18:29:00

为你制定一个例子如下

<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

来源

2014-11-04 18:06:00 Mateen

我建议使用$选择服务定制指令，而不是试图通过单击编程围绕破解你的方式。

然后，您可以访问用户界面，选择内置的操作，如
$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

来源

2016-10-04 16:44:04

我还发现了另一种解决方案，即。测试用户界面，选择与capibara和jQuery：

$('.ui-select-container').scope().$select.open = true; 
$('.ui-select-container').find('.ui-select-choices-row').first().find('a').click();

来源

2016-12-20 09:46:53 Darex1991

访问$select与require: 'uiSelect'不起作用。

尝试$elem.find('input').click()打开和$('body').click()关闭用户界面。

来源

2017-03-17 15:37:09

如何手动切换angular-ui-select下拉菜单

回答

相关问题