2014-09-23 12 views
9

używam kątowe UI bootstrap dyrektywę automatycznego uzupełniania wielokrotność dla automatycznego uzupełniania w formiekątowa UI bootstrap: Wpisz wyprzedzeniem wybrać

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

ja ściągam rekordy z serwera zdalnego za pośrednictwem $http usługi. Działa dobrze. Jednak mogę wybrać tylko jeden element z listy na raz.

Chcę wybrać wiele wartości z listy i pokazać cały aktualnie wybrany element w polu wejściowym za pomocą przycisku usuwania tak jak znaczniki dla SO. Wybrane znaczniki są przechowywane w modelu z tablicą kątową.

Jak to osiągnąć?

Posiadam dokumentację dotyczącą bootstrapu Angular UI, ale nie jestem w stanie znaleźć niczego.

+0

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

+0

@MikeRobinson Tego właśnie szukałem. Dla potwierdzenia istnieje jakakolwiek różnica między typem wyprzedzającym a ui-select. Pytam o logiczną różnicę w kategoriach – Syed

+0

jest mnóstwo jestem pewien. UI-Select jest kanciastą natywną wersją Select2 (http://ivaynberg.github.io/select2/) i jako taki ma dużo więcej funkcji. Warto zauważyć, że ui-select funkcjonuje jako globalny zamiennik wszystkich skrzynek rozwijanych, a nie tylko jako nagłówek. –

Odpowiedz

12

Ten facet wydał dyrektywę. Powinien robić dokładnie to, co chcesz, a nawet używać nagłówka ui-bootstraps.

https://github.com/mbenford/ngTagsInput

+0

Niestety, polecenie ngTagsInput nie obsługuje dużych list, musi pokazywać przewijalną listę wartości i nie filtrować listy na podstawie danych wprowadzanych przez użytkownika, takich jak typeahead. –

0

W js pliku:

Aby wyświetlić wszystkie wybrane elementy, użycie $ artykuł z wpisywanie znaków z wyprzedzeniem-on-select i popchnąć do tablicy dla ex.evtMem. usuń fn, aby usunąć wybrany element.

HTML: Użyj tabeli, aby wyświetlić wszystkie wartości tablic za pomocą ng-repeat. Dodatek do tego dodatku usuwa obraz i funkcję glyphicon, aby usunąć odpowiedni element.

+0

Czy masz jakieś dyrektywy lub działający kod, proszę podzielić się tutaj. –

2

Najlepsze rozwiązanie, jakie do tej pory znalazłem, to: io.select ma dokładnie to, czego potrzebujesz, typ wielokrotny wyboru. i znaczników jest schludny i czysty też np:

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

Składnik ten jest także zgodny z bootstrap i nowego bootstrap 4.

Powiązane problemy