Angular UI bootstrap: Type ahead select multiple

10
votes

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.

3
angularjstwitter-bootstrapangular-ui-bootstrap
github.com/angular-ui/ui-select – Mike Robinson
@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
there are plenty I'm sure. UI-Select is an angular native version of Select2 (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

3 Answers

13
votes

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

2
votes

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.

0
votes

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.