feat(select): add select directive?

[NewMediaRoc]

A directive to replace the select element with a custom treatment would be a great addition to the Bootstrap package.

If I end up writing one of my own, I'll make sure to submit it to y'all.

[ajoslin]

Sounds cool! It could re-use lots of typeahead's code, too. Go for it :-)

[pkozlowski-opensource]

Similar request: #471

Any takers? I'm not sure it will be so trivial, though....

[bekos]

For a simple select, I think this can be implemented just using the buttons checkbox and the dropdown. I will do a quick plunker to show.

[bekos]

Do we talk for something like this? http://plnkr.co/edit/NpQswghcMdQ2CASaVDe9?p=preview

[ajoslin]

What if we based it off of typeahead, and made something like select2, but with Angular?

[bekos]

That would be better I guess :-)

[pkozlowski-opensource]

@bekos this is cool :-) I didn't think about re-using existing buttons directive :-) But it is true that we could reuse radios to have single-select and check-boxes to have multi-select :-) I love working with you guys :-)

Still not sure how far we would be from the full functionality of http://davidstutz.github.io/bootstrap-multiselect/ We would have to provide item-templates at least... But then again, maybe in this case there is not much point in having a custom directive???

@ajoslin I would love to have select2 in pure AngularJS but this is probably not a minutes job judging from http://ivaynberg.github.io/select2/ What portion of typeahead you would like reuse?

[ajoslin]

For a basic select: Basically typeahead, except it shows everything at first and typing filters it down. And you can scroll within the typeahead container if it goes greater than X items. Then add a bit of styling.

For more options, like tags and multi-select and optgroups: ... a lot more work :-)

[bekos]

@pkozlowski-opensource From bootstrap-multiselect we are not that far away. The only problem I can think of is that for multiple select the dropdown closes on the first click.

If we could mix and the typeahead's functionality to reduce available options like @ajoslin said, I think the result could be similar (or close enough :-) ) to select2.

[amitava82]

I've been trying to make a native multiselect directive for angular. I'm new to directives, this is how far I'm able to do (not perfect) http://plnkr.co/edit/tw0hLz68O8ueWj7uZ78c?p=preview
The idea I have is pass the expression in the directive like select directive <multiselect options="o.name for o in options" ng-model="selectedValue"></multiselect>. I'm stuck in how to parse the expression in options so that I can generate my checklist dropdown. If anyone can give me some directions, that would be helpful.

[bekos]

Hello @amitava82. You can look at the typeahead's parser on this project or in the original select directive of AngularJS.

[amitava82]

Yes, I just started looking into it. It has everything I needed to know. I'm learning a lot from angular-ui source. Hopefully I'll be able to finish it soon and contribute :)

[pkozlowski-opensource]

@amitava82 Your plunker looks promising - pure power of AngularJS. Go for it! And hey, don't forget to add unit tests while submitting a PR :-)

[amitava82]

@pkozlowski-opensource Thanks! Here is an updated WIP plunker http://plunker.co/edit/xWvfWYjaW7TThKZONkv5?p=preview Looking for suggestions and code review. Lot more to fix and refactor. Thanks!

[leesei]

👍 to Angular's implementation of select2 with typeahead + <select>

Several comments on @amitava82 's plunker:

• cannot use up/down arrow to select option
• searchText should be set to null/"" whenever isVisible is set to false
• filter: searchText may be too broad, both { 2, "Alexandra" } and { 12, "Emily" } showed up when I typed 2 in the search field.
  It may be better to filter only on display text, or allow the user to pass the filter function.

[pkozlowski-opensource]

Today was answering one of the questions on SO and realized how easy it would be to add a Select2-like directive based on the existing typeahead one: http://plnkr.co/edit/OKcQgNqTWw6XGAe0vkdy?p=preview

A bit of HTML/CSS magic and we should be done!

[pkozlowski-opensource]

Since we are cleaning up issues backlog I'm going to close this one for now. If anyone is interested in persuading work on the proposed directive please open a pull request when you've got something working and ready to be reviewed.

[nathantsoi]

here's an example of a working multiselect using the typeahead directive (including the code from the pull request below): http://plnkr.co/edit/v4dOw5p8R5uNPZ0m7cQa?p=preview

until this pull request get's merged, #2127, the popup wont open until you type something