<select ng-model="machineSelected"
ng-options="machine._id as machine.name for machine in machineList"
ng-change="onChangeMachine(machineSelected)"
ng-disabled="!mineSelected">
<!--<option value=""></option>-->
<option value="">Select</option>
</select>
When I add
$scope.machineSelected = "";
dynamically wherever in the controller, option in drop-down should set as "Select", but it is not updating.
Use null
or undefined
, not an empty string, as the "not selected" value.
That's what the docs say:
Optionally, a single hard-coded <option>
element, with the value set to an empty string, can be nested into the <select>
element. This element will then represent the null
or "not selected" option. See example below for demonstration.
It's not really clear that an empty string can't be used, but at least they mention null
.
Set default option in controller and dynamically change based on selected item
<select ng-model="selectedItem" ng-change="getSelectedText()">
<option >All Items</option>
<option >Active Subscriptions Only</option>
<option >Expired Only</option>
</select>
Controller
app.controller('SelectedTextController', function ($scope) {
$scope.selectedItem = "All Items";
$scope.getSelectedText = function () {
var selectedItem=this.selectedItem;
};
});
Use null
for the unselected value:
̶$̶s̶c̶o̶p̶e̶.̶m̶a̶c̶h̶i̶n̶e̶S̶e̶l̶e̶c̶t̶e̶d̶ ̶=̶ ̶"̶"̶;̶
$scope.machineSelected = null;
The ng-options
directive was re-factored with AngularJS V1.6. Before then the default could be selected with an empty string. Now the default is selected by assigning null
to the model.
For more infomation, see
- AngularJS API Reference - Using
select
with ngOptions
and setting a default value
- AngularJS ng-options Directive API Reference
- AngularJS Developer Guide - Migrating to V1.6 - select directve
- ng-options is hiding the blank value with AngularJS V1.5
The DEMO
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.machineList = [
{ _id:1, name: "Megatron" },
{ _id:2, name: "Starscream" },
{ _id:3, name: "Shockwave" },
];
$scope.machineSelected = null;
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
<select ng-model="machineSelected"
ng-options="machine._id as machine.name for machine in machineList"
ng-change="onChangeMachine(machineSelected)">
<option value="">Select</option>
</select>
<br>
machineSelected={{machineSelected}}
</body>