Why does AngularJS include an empty option in select?
Adding ng-model to predefined Select element adds undefined option -
<option value="? undefined: undefined ?"></option>
Adding ng-model to predefined Select element adds undefined option -
AngularJs overrides the "selected" property when we bind
the select to a model. If we inspect the rendered DOM we will find that a new
item has been added i.e.
I think ?undefined:undefined ? should not be set as value. When a user choose nothing they
? undefined: undefined ? will
be submitted as value.
You could just initialize it using ng-init such as in the
below examples.
Defining that model in the controller -
<script>
var myApp = angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function ($scope) {
$scope.selectedOption = 1;
}]);
</script>
And other example is -
<div ng-init="selectedOption=1">#TODO</div>
And it looks like -
<select ng-model="selectedOption" required="required" ng-init="selectedOption='1'"
ng-options="option.value as option.name for option in typeOptions"></select>
Other one example is -
<select ng-model="selectedOption" required="required"
ng-options="option.value as option.name for option in typeOptions">
<option style="display:none" value="">select
a type</option>
</select>
Other one example is -
<select ng-options="option.value as option.name for option in typeOptions">
<option value="" ng-if="false"></option>
</select>