如何手動切換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下拉菜單

回答

相關問題