Come attivare manualmente il menu a discesa angolare-ui-select

Sto usando la selezione ui di AngularUI per creare diversi multiselect su una pagina. Devo essere in grado di aprire l'elenco a discesa quando un utente fa clic su un pulsante sulla pagina.Come attivare manualmente il menu a discesa angolare-ui-select

Ho provato con jQuery .click() e .toggle('click') sull'elemento, ma queste si traducono in un errore di $apply already in progress quando viene chiamato da in funzione del pulsante ng-click. Funzionano anche se chiamati dalla console di Chrome. La funzione in ng-click non fa altro che simulare un altro clic.

.focus() non fa nulla, oltre a focalizzare l'input.

Ho anche provato a malincuore un hack brutto, dove ho usato il prescelto del ng-init a conservarlo del controller a un ambito il pulsante ha accesso a, e quindi utilizzando toggle() e activate() metodi del controllore. Ciò ha focalizzato l'input, ma l'elenco a discesa associato non si aprirà.

Come è possibile attivare manualmente il menu a discesa, dall'esterno del contesto dell'elemento di selezione ui?

Here's a Plunker you can play with.

fonte

2014-11-04 Schlaus

Puoi fare un violino per una migliore comprensione – Asik

@Asik aggiunto link alla domanda – Schlaus

ho provato e potrebbe essere raggiunto con il metodo direttiva. lavorando 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(); 
       }); 


      }); 
     } 
    }; 
});

Aggiungi questa direttiva attributo al pulsante

<button id="btn" open-menu-by-click="searchBarArea">Click me</button>

fonte

2014-11-04 18:57:27 Asik

Grazie, questa è una soluzione perfetta! – Schlaus

benvenuto. Felice di aiutare .. :) – Asik

Un po 'tardi per il gioco, ma con ui-selezionare 0.19.5, il seguente ha funzionato per me: '$ (" # "+ attrs.clickUiSelect) .find (' span ') [0 ] .Fare clic(); ' – twip

Forse è possibile associare una proprietà all'attributo size del dropdownlist. Imposta la proprietà su un numero come "6" per farla apparire come se si stesse aprendo e tornando a "1" quando vuoi che crolli. Altrimenti non sono sicuro che ci sia un altro modo. Vedi riferimento here.

fonte

2014-11-04 17:53:07 mikelt21

Grazie per la risposta, ma in realtà non ho un elemento di selezione con cui farlo. Per favore guarda il Plunker che ho aggiunto alla domanda. – Schlaus

Un esempio sviluppato per voi come di seguito

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

, ma sembra che ci sia un modo migliore, ma, devi pagare per esso LINK

fonte

2014-11-04 18:06:00 Mateen

vi consiglio di utilizzare il servizio di selezione $ in una direttiva personalizzato invece di cercare di incidere il vostro modo per aggirare facendo clic su di programmazione.

È quindi possibile accedere ui-select 'costruito in azioni come
$select.toggle() per attivare o disattivare la discesa
$select.activate() per l'apertura e
select.close() per la chiusura del menu a discesa.

myModule.directive('myUiSelect', function() { 
    return { 
    require: 'uiSelect', 
    link: function(scope, element, attrs, $select) { 
     $select.activate(); // call this by an event handler 
    } 
    }; 
});

E nel modello

<ui-select my-ui-select> 
    ... 
</ui-select>

Vedi di riferimento: https://github.com/angular-ui/ui-select/wiki/Accessing-$select

fonte

2016-10-04 16:44:04

ho trovato anche un'altra soluzione, vale a dire.per testare ui-select con capibara e jQuery:

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

fonte

2016-12-20 09:46:53 Darex1991

Accesso $select con require: 'uiSelect' non funziona.

Prova $elem.find('input').click() da aprire e $('body').click() per chiudere l'interfaccia utente.

fonte

2017-03-17 15:37:09

Come attivare manualmente il menu a discesa angolare-ui-select

risposta

Problemi correlati