I am working with ng-options in my select tag to provide users with choices. Everything is functioning smoothly, but I noticed that once an option is selected, the default blank value disappears. Is there a way to revert back to the default blank value if needed? How can I maintain that blank value?
Here is a snippet of my code:
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="myController">
<h1>Hello World!</h1>
<select ng-model="mySelection" name="" id="" ng-options="x.value as x.label for x in myOptions">
</select>
</body>
</html>
<script>
var app = angular.module('app', []);
app.controller('myController', function($scope){
$scope.myOptions = [{
"value": null,
"label": null,
},{
"value": "First",
"label": "First",
},{
"value": "Second",
"label": "Second",
},{
"value": "Third",
"label": "Third",
}]
});
</script>
You can view the working example on Plunker: http://plnkr.co/edit/5f17YxRfWFI4g40t3NEf?p=preview