AngularJS select creates option with value "? object:null ?" and doesn't use empty default option when bound to null

Question

Here's what the code looks like

<select ng-model="nullableInt">
  <option></option>
  <option value="0">First option</option>
  <option value="1">First option</option>
  <option value="2">First option</option>
</select>

When nullableInt is null the generated html is

<select ng-model="nullableInt">
  <option></option>
  <option value="? object:null ?"></option>
  <option value="0">First option</option>
  <option value="1">First option</option>
  <option value="2">First option</option>
</select>

Reproduced in the plunkr here: http://plnkr.co/edit/05pBEMJppmkrn3nFgYdk?p=info

It's worth mentioning that I'm trying to avoid using ng-options, it seems like a bit of overkill to create an endpoint for AngularJS to consume some data that really will not change very often, if ever.

angularjs is inconsistent when it comes to the default select option stackoverflow.com/questions/23686118/… — Timo Huovinen
– Timo Huovinen, Commented Sep 2, 2015 at 7:36
had a similar problem ? number:0 ? fixed by making the default value of model a string instead of int e.g mymodel = "0" instead of mymodel = 0; — stefan
– stefan, Commented Nov 4, 2015 at 17:17

dmullings · Accepted Answer · 2017-03-29 13:42:16Z

18

Update 3/29/2017:

As Jorge Rodrigues dos Santos stated, this should be handled in a different way for newer versions of angular. Below is taken from the current documentation for angular 1.6.3

Optionally, a single hard-coded element, with the value set to an empty string, can be nested into the element. This element will then represent the null or "not selected" option. See example below for demonstration.

https://docs.angularjs.org/api/ng/directive/select

Angular is creating a new option to represent the null value. It didn't find one of the options you provided in the HTML.

To bind to null, set the value="null" on the first option

<option value="null"></option>

http://plnkr.co/edit/kzPVu4hiMcP6wA6crGYt?p=preview

edited Mar 29, 2017 at 13:42

answered May 14, 2014 at 0:27

dmullings

7,2005 gold badges30 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

MushinNoShin Over a year ago

lol. wow. Seriously, I read the docs and could have sworn they said to use <option></option>. Good call, solved it just fine. Will mark as answer soon.

Jorge Rodrigues dos Santos Over a year ago

Doesn't seem to work with more recent angular versions

kmhigashioka Over a year ago

I dont think this is the answer. The actual value is "null" instead of null

dmullings Over a year ago

@kazupooot this post over 3 years old...but I believe for the angular version at the time (1.2.16) a null model value would result in the select element initially having option with the value set to "null" being selected. At that point I think the model's value was still null. This is what the op was asking for. If the user selected another option and then re-selected first option, the value would then be set to "null" as you noted.

kaiser Over a year ago

always be carefull with select and value vs ng-value: String representation (or identifier) vs real object

|

atheaos · Accepted Answer · 2015-10-28 15:35:30Z

The accepted answer didn't work for me because my property could be blank, null, or undefined. If you are using version 1.3+ then you can use a getterSetter to coerce the value to blank.

I was dealing with string values. You'll have to handle 0 or other valid falsy values in the function as well.

$scope.nullableIntCoerced = function(n) {
    return arguments.length ? ($scope.nullableInt = n) : ($scope.nullableInt || "");
}

<select ng-model="nullableIntCoerced" ng-model-options="{getterSetter:true}">
    <option value=""></option>
    ...

https://code.angularjs.org/1.3.20/docs/api/ng/directive/ngModel

Jorge Rodrigues dos Santos · Accepted Answer · 2016-08-27 20:57:29Z

1

For more recent versions of Angularjs use <option value=""> - </option> for the null value

answered Aug 27, 2016 at 20:57

Jorge Rodrigues dos Santos

1,10711 silver badges15 bronze badges

Comments

Srivani Challa · Accepted Answer · 2017-04-04 04:36:44Z

Below solution solved the problem for me.

The problem here is when ng-model is used, it adds a default option with value "?" and without using ng-model, one can not use ng-change to get the current selection. I have actually created an onChangeSelection() within which we can set the defaultSelected property of the like below

$scope.onChangeSelection = function(id) {

    document.getElementById(id)[0].defaultSelected = true;
    $scope.selected = $('#'+id).val();
}

<select id="mySelect" ng-model="nullableInt" ng-options="option.value as option.text for option in arrayContents track by option.value"                    ng-change="{{onChangeSelection(id)}}" required>
    <option value="" ng-if="false"></option>
</select>

This would exclude the default option from the options list and also make the first value as defaultSelected.

Sorry but if this would be the only solution, i would never ever use the component select. Way too complex for a single selection component.

Collectives™ on Stack Overflow

AngularJS select creates option with value "? object:null ?" and doesn't use empty default option when bound to null

4 Answers 4

Update 3/29/2017:

6 Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Update 3/29/2017:

6 Comments

Comments

Comments

1 Comment

Linked

Related