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>
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|