current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 5 down vote favorite

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.

share|improve this question
    
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 (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
up vote 10 down vote

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

share|improve this answer
    
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 at 13:39
up vote 0 down vote

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.

share|improve this answer
    
Do you have any directive or working code then please share here. – Ali Adravi Sep 5 at 15:41
up vote 0 down vote

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>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.