Angular UI Bootstrap: Type ahead wählen Sie mehr

Ich verwende Winkel UI Bootstrap-Type-Ahead-Richtlinie für Typ-ahead in einer FormAngular UI Bootstrap: Type ahead wählen Sie mehr

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

Ich bin die Datensätze von Remote-Servern über $http Service abgerufen werden. Es funktioniert gut. Allerdings kann ich nur ein Element aus der Liste gleichzeitig auswählen.

Ich möchte mehrere Werte aus der Liste auswählen und alle aktuell ausgewählten Element im Eingabefeld mit einer Schaltfläche zum Entfernen zeigen, genau wie Tags für SO. Die ausgewählten Tags werden im Angular-Array-Modell gespeichert.

Wie erreichen?

Ich habe Dokumentation für Angular UI Bootstrap gelesen, aber ich bin nicht in der Lage, etwas zu finden.

Quelle

2014-09-23 Syed

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

@MikeRobinson Das ist, was ich gesucht habe. Nur zur Bestätigung gibt es einen Unterschied zwischen Typ-Ahead und Ui-Select. Ich frage nach logischen Unterschied in Bezug auf – Syed

gibt es viele, ich bin mir sicher. UI-Select ist eine eckige, native Version von Select2 (http://ivaynberg.github.io/select2/) und enthält daher wesentlich mehr Funktionen. Es ist erwähnenswert, dass ui-select Funktionen als globaler Ersatz für alle Dropdown-Boxen, nicht nur als eine Art-Ahead-Funktion. –

Dieser Typ hat eine Richtlinie dafür gemacht. Sollte genau das tun, was Sie wollen, und es verwendet sogar die UI-Bootstraps Typahead.

https://github.com/mbenford/ngTagsInput

Quelle

2014-09-23 14:01:04

Leider reagiert ngTagsInput nicht auf große Listen, es muss in der Lage sein, eine scrollbare Liste von Werten anzuzeigen, und die Liste wird nicht basierend auf der Benutzereingabe wie typeahead gefiltert. –

In js-Datei:

alle ausgewählten Elemente aufzulisten, verwenden Sie $ item mit typeahead-on-select, und drücken Sie auf ein Array für ex.evtMem. Löschen Sie Fn, um das ausgewählte Element zu löschen.

HTML: Tabelle verwenden, um alle Array-Werte mit ng-repeat aufzulisten. Zusatz zu diesem Hinzufügen entfernen Glyphonbild und Funktion, um das entsprechende Element zu löschen.

Quelle

2015-12-15 09:36:30 Raviraj

Haben Sie eine Richtlinie oder Arbeitscode, dann teilen Sie bitte hier. –

Die beste Lösung, die ich bisher gefunden habe, ist io.select es tut genau das, was Sie benötigen, Multi-Select-Typahead. und das Markup ist ordentlich und sauber zu zB:

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

Diese Komponente auch mit Bootstrap und den neuen Bootstrap 4.

Quelle

2016-10-21 13:26:58

Angular UI Bootstrap: Type ahead wählen Sie mehr

Antwort

Verwandte Themen