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

Question

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 co

Answer 1

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>

Answer 2

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>

Answer 3

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>

Answer 4

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();

Answer 5

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).

Answer 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.