ngOptions creating blank option

[mich...@gablit.com]

I'm observing this bug even with the sample code in the manual.  Here's how to reproduce it:

In the Demo area, use the little [X] to delete all the existing options.  Observe that there is one (empty) option in the select pulldown.  Press [add] and type the name of a new option.  Observe that there are now two options in the pulldown: the empty option and the one you just created.

I am having this problem because I am retrieving the options from the database.  I need the first one retrieved to be the default choice.  This seems like the natural behavior and without it, ngOptions is useless for non-static selects.  Any suggestions?

[Peter Bacon Darwin]

There is an empty option because your model value does not match any of the options in the list.  So rather than changing your model and assigning the first item, the directive creates an empty option to indicate that the selection is not valid.  If you want to change how this looks you can add your own static empty option below the select with an empty string for a value:

<option value="">-- Nothing Selected</option>

You can even set this not to appear if you don't like it.

<option value="" style="display: none;">-- Nothing Selected</option>

But a much better option is to select a valid item for the model when you get the data from the server.  This makes it clear what your business rules are:

if ( color == null ) {

  color = colors[0];

}

Pete

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

[Pawel Kozlowski]

hi!

You might want to check this SO question & answer:
http://stackoverflow.com/q/12654631/1418796 as well.

Cheers,
Pawel

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en.
>
>

--
Question? Send a fiddle
(http://jsfiddle.net/pkozlowski_opensource/Q2NpJ/) or a plunk
(http://plnkr.co/)
Need help with jsFiddle? Check this:
http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/

Looking for UI widget library for AngularJS? Here you go:
http://angular-ui.github.com/

[Mark M. Young]

Pete,

This is no small problem.  I have provided ngOptions with both object and array data sets containing properties mapped to the options' value attribute where the value was an empty string without any luck.  An empty string as a JavaScript property key is perfectly valid.   Currently, if you provide a view model with a empty string going into the option value, when it is selected, AngularJS creates an option with the value of "?" with no/empty text AND changes the selection to it (making selecting the custom empty option IMPOSSIBLE).  THEN, when the user selects an option with a non-empty value, the "?" option disappears.    I suspect jQuery's .val() function has a role in assigning undefined when an empty string is passed, but that's no excuse.

You say developers can either put the "empty" option in the view or have business logic that defaults to some (non-"empty") option--those two workarounds provide completely disjoint use cases.  Browser validation assumes required inputs (input, select, etc.) are invalid if the value is "falsey".  The automatic "empty" option does not facilitate validation nor does it allow customization.  Many developers want to put the "empty" option in business logic/ngOptions, period.  Please consider looking through the code to find where you can respect the empty string as a valid value and most likely setting the select's ngModel to null when any of them are selected.

Regards,
Mark M. Young