Set default value in select when the ng-model is null

All we need is an easy explanation of the problem, so here it is.

I’m new to angular and i’m trying to set a default state to select when my ng-model is null. Basically I want to set it to ‘None’ if the model is empty. I tried the below code but it’s not working.

<select ng-init="item.carType | item.carType='none'" ng-model="item.carType">
    <option value="none">None</option>
    <option value="manual">Manual</option>
    <option value="auto">Auto</option>                      
</select>

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Try this:

<select ng-init="item.carType = item.carType || 'none'" ng-model="item.carType">
    <option value="none">None</option>
    <option value="manual">Manual</option>
    <option value="auto">Auto</option>                      
</select>

That said, per the docs, this is probably a misuse of ngInit. The proper way to do this would be to initialize your model with sane values in the controller (or service, if that’s where it came from).

Method 2

H i ,

My thoughts are it is best to do this in the app rather than the template.

  if(typeof $scope.item.carType==="undefined") {
     $scope.item.carType="none";
  }

or simply setting the value

$scope.item.carType="none";

before it is updated with whatever you are using to set the value : –

$scope.item.carType="none";
$scope.item.carType=someasyncfunctionthatmighttakeawhileandthetemplateisrenderedbeforeitarrives();

Method 3

You can solve using a value in ng-init

<select ng-init="item.carType='none'" ng-model="item.carType">
    <option value="none">None</option>
    <option value="manual">Manual</option>
    <option value="auto">Auto</option>                      
</select>

Method 4

What I would suggest you to do is this.
Make a function in your controller and check if $scope.item.carType == undefined assign a default value.

$scope.setDefaultValueForCarType = function () {
      if($scope.item.carType == undefined) {
          $scope.item.carType = "none";
      }
}

This will work too.

<select ng-init="item.carType='none'" ng-model="item.carType">

Method 5

Often happens that your ng-model="item.carType" doesn’t match any of the select option keys because of the wrong case.

For example: item.cartType is "Manual" but in the options you have an option <option value="manual">Manual</option> in this case it won’t work and in the console output you’ll see something like this: <option value="? string:Manual ?"></option>

So, either correct your data model or your select option value:
<option value="Manual">Manual</option>

Method 6

What you are looking for is undefined.

If the value is undefined do you need a value to go to the database when ‘none’ is selected?

If sending an empty is acceptable you may consider the following:

<select ng-model="item.carType">
    <option value="">None</option>
    <option value="manual">Manual</option>
    <option value="auto">Auto</option>                      
</select>

Fiddle

This allows you to pass in a value as well and use the same form for edits and new records.

Method 7

Based on Rob Sedgwick idea, in a pinch deadline I’m not using $scope so with controller as syntax.

loadStates(); //this calls my function for my code

// this is based on what Rob S. is doing with $scope    
if(typeof vm.scriptQuestion.statecode ==="undefined") {
    console.log('in');
    vm.scriptQuestion.statecode = "AA";  // "AA" happens to be the value of the default name for All of my States that is then displaying "ALL" now when before it was blank
}

Here is my Select ( yes, this is a garbage way of doing angular select boxes as ng-repeat is very limited for a select )

 <select id="States" ng-model="vm.scriptQuestion.statecode">
     <option ng-repeat="state in vm.states" value="{{state.StateCode}}">{{state.StateName}}</option>
 </select>

Method 8

I’ve made the following changes to your code and it should work now. I’ve removed the second part in ng-init="" and set the None option value to undefined.

<select ng-init="item.carType='none'" ng-model="item.carType">
    <option value=undefined>None</option>
    <option value="manual">Manual</option>
    <option value="auto">Auto</option>                      
</select>

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply