13

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.

2
  • angularjs is inconsistent when it comes to the default select option stackoverflow.com/questions/23686118/… 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
    Commented Nov 4, 2015 at 17:17

4 Answers 4

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

6
  • 1
    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. Commented May 14, 2014 at 0:32
  • Doesn't seem to work with more recent angular versions Commented Aug 27, 2016 at 20:53
  • 1
    I dont think this is the answer. The actual value is "null" instead of null Commented Mar 29, 2017 at 2:04
  • @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.
    – dmullings
    Commented Mar 29, 2017 at 13:32
  • always be carefull with select and value vs ng-value: String representation (or identifier) vs real object
    – kaiser
    Commented Nov 14, 2018 at 11:45
1

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

1

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

0

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.

1
  • 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.
    – kaiser
    Commented Nov 14, 2018 at 11:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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