10

I am using angular UI bootstrap type-ahead directive for type-ahead in a form

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

I am fetching the records from remote server via $http service. It is working fine. However I can select only one element from list at a time.

I want to select multiple values from the list and show all currently selected element in input field with a remove button just like tags for SO. The selected tags are stored in angular array model.

How to achieve this ?

I have read documentation for Angular UI bootstrap but I am not able to find anything.

Syed
  • 1,461
  • 3
  • 19
  • 37
  • https://github.com/angular-ui/ui-select – Mike Robinson Sep 23 '14 at 14:20
  • @MikeRobinson This is what I was looking for. Just for confirmation is there any difference between type-ahead and ui-select. I am asking about logical difference in terms – Syed Sep 23 '14 at 14:24
  • there are plenty I'm sure. UI-Select is an angular native version of Select2 (http://ivaynberg.github.io/select2/) and as such ships with a lot more features. It's worth noting that ui-select functions as a global replacement for all dropdown boxes, not just as a typeahead. – Mike Robinson Sep 23 '14 at 17:43

3 Answers3

13

This guy made a directive for this. Should do exactly what you want and it's even using the ui-bootstraps typeahead.

https://github.com/mbenford/ngTagsInput

m.brand
  • 658
  • 5
  • 12
  • Sadly ngTagsInput does not handle large lists, it needs to be able to show a scrollable list of values and does not filter the list based on the user input like typeahead. – Kevin Burton Oct 21 '16 at 13:39
2

The best solution I have found so far is io.select it does exactly what you require, multi-select typeahead. and the markup is neat and clean too e.g:

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

This component is also compatible with bootstrap and the new bootstrap 4.

William
  • 502
  • 1
  • 9
  • 27
Kevin Burton
  • 11,676
  • 2
  • 24
  • 37
0

In js file :

To list all selected items, use $item with typeahead-on-select and push to an array for ex.evtMem. delete fn to delete selected item.

HTML : Use table to list all array values using ng-repeat. Addition to that add remove glyphicon image and function to delete corresponding item.

Raviraj
  • 11
  • 4