dropdown and ng-model

[michahell]

Huh? There is no documentation whatsoever on how to wire up the dropdown component into angular. I've tried to add:

• an ng-model directive, but that doesn't work.
• an ng-change directive, but that does not work either.

Is there no other way to catch the changes? How is this supposed to work? Did i miss a special section of documentation somewhere?

[pkozlowski-opensource]

Did you check the demo page? http://angular-ui.github.io/bootstrap/

[michahell]

@pkozlowski-opensource yes, that is what i am talking about. there is no documentation there about how to wire it up to some $scope.dropdown model... in other words, how will i be able to get the selected value in an angular js controller?

[pkozlowski-opensource]

I think that you are miss-interpreting how this directive works - its sole purpose is to control displaying / hiding dropdowns. The content of each dropdown and its selection should be handled by a separate directive. For example you can add ng-click to get called when a certain item is clicked.

[michahell]

I disagree, it should not be handled by a separate directive. This is the kind of the purpose of a dropdown should have, to provide a user with options and to be able to report what option has been chosen (to angularJS in this case). To provide a good analogy: With this logic you could also strip the datepicker of it's model related functionality, and say: "yeah, but to wire up the datepicker's model requires a separate directive. We only want to be able to pick dates and be able to click individual days." Then, what's the point of having a datepicker directive?

I would then call this a 'semi-working dropdown', or 'animated dropdown selector' in that sense. In any case, make it clear that this dropdown doesn't provide model functionality explicitly.

I love Angular-ui/bootstrap :) but this makes no sense to me :)

[pkozlowski-opensource]

@michahell I don't think we will be able to satisfy all the needs people might have in respect to different directives so I guess we will have to agree to disagree here - my opinion is that one should compose an application of small, focused and reusable directives. I fully respect and acknowledge the fact that others might have a different opinion and would design the same directive differently.

Feel free to fork & send a pull request with a proposed change or maintain your own fork.

[pkozlowski-opensource]

Closing this one as I really don't feel like ng-model should be part of this directive - what if people want to simple invoke some actions using ng-click?

But I'm definitively open to be convinced with a solid pull request that demonstrates elegant API that plugs into ng-model.

[michahell]

Understood, agreed. Will later fork and try and see if i can get that working elegantly :)

[acgentry]

+1 for ng-model attribute

[shootermv]

Hi to all great developers of this library. i'm trying to teach myself to programming in your way. So i have build this new angular-bootstrap directive called "drop-menu" It based on your dropdown and typeahead controls- In my case user will be able to use the ng-model and specify which property of list will be displayed and what will be populated to the model. http://plnkr.co/edit/ECdIBX6GGQycw1tg5Xw7?p=preview

please (if you have time) tell me what are you think about this control/directive

[lapo-luchini]

@shootermv that's quite useful, do you plan to publish it somewhere?

[ktiedt]

Dropdown's are essentially a style-able alternative to selects... I fail to see how ng-model support doesnt fall into this scope...

Count me into the +1 ng-model group for what its worth.

[RoelRoel]

It should have ng-model support: Now it has hardly any use..

+1 for ng-model support

[karianna]

Re-opening for further comment by maintainers

[hj-michal-jendrzejewski]

+1 for ng-model support

[chrisirhc]

I don't think this is within the scope of this project at the moment. We're focusing on stability of the current components. We want a basic core set of components most people will find useful. Hence, the name bootstrap.

This falls into the category of useful for some few people. It also makes dropdowns much more complicated. In bootstrap, the use of dropdowns are for very basic menus. I don't think we should make this directive more complicated.

I see perhaps there's frustration in using this directive for saving to the model. But it isn't designed to be used to store state. Using a directive that wasn't intended for its purpose will of course lead to frustration.

[rvanbaalen]

I completely agree with @chrisirhc on this one. People are trying to use a dropdown as a select. We have a different project for selects:

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

UI Select is basically a dropdown with ng-model support.

[michahell]

Even though I respect the decision to exclude ngmodel etc. I feel I have to clarify why I asked this question in the first place. This incredibly useful library adds components together with quite complete basic functionality of those components. To illustrate:

• The Accordion component has a way to find out what accordion 'tab' is open, i.e. 'is-open' attrib.
• The button / button groups have a way to figure out what the user pressed, i.e. ng-model support.
• The datepicker has a way to figure out what the date picked by the user is, i.e., ng-model support. etc. etc. etc. Then, the dropdown component has no way to figure out what is picked. Even though this is a decision with reason behind it, you break continuity because the other components do allow for minimal basic functionality. So that is what devs would expect to have with the dropdown compoent also.

What @rvanbaalen says I don't fully agree with as well. Why should people use an entire different library if they only wish to include basic dropdown functionality? Again, with basic functionality I mean being able to find out what a user has selected in the dropdown, which is what you'd expect from a dropdown (hence some devs find excluding angular model support a weird decision). If more elaborate / complex behaviour is needed, of course, point people in the direction of a more complex library with lots of extra features and gimmicks, which is what UI Select seems to offer.

[rvanbaalen]

@michahell You can find out what the user selected by simply adding an ng-click handler or similar to the dropdown items. For more advanced behavior, use ui-select.

[michahell]

@rvanbaalen I understand, but that was not the point I was trying to make :) I could also add ng-click handlers to other components and have the basic functionality I'd need using them. But I don't have to, because you guys made it easier for me to use by having an ng-model or other attribs I can use!

And imagine the use case where I populate the dropdown elements dynamically (not even that exotic a use case i'd say) or having 5-10 dropdowns with each 20+ elements. Maybe a ui-select component would be better in such a case, but i'd argue against it, given the complexity / features etc. In the first case, I'd have to write code to wire up the dropdown with ng-click or similar handlers when being populated, in the second i'd have to spend some time adding ng-click handlers to all the choices. Far from ideal. But again I respect the choice for excluding this - I see it as a 'minimal component' philosophy which is great, I would just have added more support for the dropdown :)

[rvanbaalen]

@michahell I appreciate your in-depth explanation on this matter. It seems like you are using dropdowns in the context of a form, am I correct? If that's the case, you're using a screwdriver to hit a nail in the wood. In that case, again, ui-select will be your hammer that can get the job done more easily.

If you can demonstrate a solid use case for ng-model support, we're always willing to take a look at it and consider support. Until then, we want to keep things as small and clean as possible.

Take a look at the ui-select example. It's not that difficult to implement.

[michahell]

@rvanbaalen Thanks, I'm trying :) I had to think back, it is a long time ago since I ran into this, but I remember what for. And actually, a more simple use case is hard to think of, which unfortunately ruins my argument haha. I only needed to make the default OS-like dropdown look better and I was too lazy to code up something myself (and besides why reinvent the wheel): http://s15.postimg.org/405addra3/Screen_Shot_2015_04_28_at_22_54_39.png (sorry for the temporary url, in between switching instant image upload services - for completeness this was a dropdown with only 2 options to select from)

However, the point was that I had used some of the other components before, and I was relying on the kind of ng-model functionality being available. Maybe some of the other devs who want this functionality have a much better use case, haha. @acgentry @ktiedt @RoelRoel @emikus

[rvanbaalen]

@michahell Haha. The fact that you can't come up with a solid use case justifies that this issue is closed I suppose :wink:

Like I said before and I keep repeating myself:

• You're using a dropdown where you should use a select

To create a custom non-browser default select element, use ui-select or a similar project.

Also, you might want to take a look at this and this. It's relatively old but still valid.

A dropdown menu is a navigational UI element where a select list is (and should be) used for user input (e.g. have ng-model support etc. to function within a form).

[michahell]

Oh i can come up with use-cases, they are just not mine haha. Actually, @rvanbaalen, the first link you gave made me realize using a dropdown indeed provides far from an ideal user experience, I must've had a reason before why I used it (I hope), but I'll change it to radiobuttons or something alike, it makes no sense for 2 options only - which is why I don't understand that you repeat that I should be using a select, that is only an even more complicated dropdown! Can you elaborate that? last question.

[rvanbaalen]

@michahell Add me on Google Hangouts for a chat on this matter if you want to continue on this. I think this issue is not the place anymore to go into detail about individual use cases. My contact details are in my Github profile.