angolare UI bootstrap: Inserire avanti selezionare più

Sto usando angolare UI bootstrap direttiva di immissione facilitata per type-ahead in una formaangolare UI bootstrap: Inserire avanti selezionare più

http://angular-ui.github.io/bootstrap/

sto recupero dei record dal server remoto tramite $http servizio. Funziona bene. Tuttavia, posso selezionare solo un elemento dalla lista alla volta.

Desidero selezionare più valori dall'elenco e mostrare tutti gli elementi attualmente selezionati nel campo di immissione con un pulsante Rimuovi, proprio come i tag per SO. I tag selezionati sono memorizzati nel modello di array angolare.

Come raggiungere questo obiettivo?

Ho letto la documentazione per il bootstrap di UI angolare ma non riesco a trovare nulla.

fonte

2014-09-23 Syed

https://github.com/angular-ui/ui-select –

@ MikeRobinson Questo è quello che stavo cercando. Solo per conferma c'è qualche differenza tra type-ahead e ui-select. Sto chiedendo circa la differenza logica in termini di – Syed

ce ne sono in abbondanza sono sicuro. UI-Select è una versione angolare nativa di Select2 (http://ivaynberg.github.io/select2/) e come tale ha molte più funzionalità. Vale la pena notare che le funzioni di selezione ui sono una sostituzione globale per tutte le caselle a discesa, non solo come un typeahead. –

Questo ragazzo ha fatto una direttiva per questo. Dovrebbe fare esattamente quello che vuoi e sta anche usando il tipo di avvio ui-bootstraps.

https://github.com/mbenford/ngTagsInput

fonte

2014-09-23 14:01:04

Purtroppo ngTagsInput non gestisce elenchi di grandi dimensioni, deve essere in grado di mostrare un elenco di valori scorrevole e non filtra l'elenco in base all'input dell'utente come typeahead. –

In File js:

Per elencare tutti gli elementi selezionati, l'uso $ item con typeahead-on-select e spingere a un array per ex.evtMem. cancella fn per cancellare l'oggetto selezionato.

HTML: Utilizzare la tabella per elencare tutti i valori di matrice utilizzando ng-repeat. Aggiunta a tale aggiunta rimuovere l'immagine e la funzione glyphicon per eliminare l'elemento corrispondente.

fonte

2015-12-15 09:36:30 Raviraj

Hai qualche direttiva o codice funzionante quindi per favore condividi qui. –

La soluzione migliore che ho trovato finora è io.select fa esattamente ciò che si richiede, selezione multipla typeahead. e la marcatura è ordinato e pulito es:

<oi-select 
    oi-options="list.id as list.description for list in lists" 
    ng-model="tags" 
    multiple 
    placeholder="Select"> 
</oi-select>

Questo componente è anche compatibile con bootstrap e il nuovo bootstrap 4.

fonte

2016-10-21 13:26:58

angolare UI bootstrap: Inserire avanti selezionare più

risposta

Problemi correlati