Question

我正在使用AngularUI的ui-select在页面上创建多个多重选择。当用户点击页面上的按钮时，我需要能够打开下拉列表。

我尝试在元素上使用jQuery的.click()和.toggle('click')，但是当按下按钮时会导致$apply already in progress错误。 s ng-click功能。它们在从Chrome控制台调用时可以正常工作。除了模拟另一次点击之外，ng-click中的功能不会做任何事情。

.focus()除了关注输入外，没有做任何事情。

我也不情愿地尝试了一个讨厌的黑客，在那里我使用了选择的ng-init将它的控制器存储到按钮可以访问的范围，然后使用控制器＆＃39; s toggle()和activate()方法。这使得重点放在输入上，但相关的下拉列表不会打开。

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

Here's a Plunker you can play with.

Answer 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>

Answer 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

Answer 3

也许您可以将属性绑定到下拉列表的size属性。将该属性设置为类似＆＃34; 6＆＃34;使它看起来好像是打开并回到＆＃34; 1＆＃34;当你想要它崩溃。否则，我不确定是否还有其他任何方式。请参阅参考 here。

Answer 4

为您开发的示例

<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

Answer 5

我发现了另一个解决方案，即。使用capibara和jQuery测试ui-select：

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

Answer 6

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

尝试$elem.find('input').click()打开，$('body').click()关闭ui。

如何手动切换angular-ui-select下拉列表

6 个答案: