how to bind default value to select using ng-model using AngularJS V1.6

Question

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

what's the default value? Would $scope.machineSelected = machineList[0]._id; work? — Aleksey Solovey
– Aleksey Solovey, Commented Jul 24, 2018 at 13:01
When i add $scope.machineSelected = " " , dynamically whereever in the controller, option in dropdown should set as Select , but it is not updating. — Vani.Ashireddy
– Vani.Ashireddy, Commented Jul 24, 2018 at 13:01
@AlekseySolovey --- 'Select' is not available in machinelist , so machineList[0]._id contains random id number but not 'Select' ... How to handle in these situation — Vani.Ashireddy
– Vani.Ashireddy, Commented Jul 24, 2018 at 13:06

thorn0 · Accepted Answer · 2018-07-24 13:38:47Z

1

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.

answered Jul 24, 2018 at 13:38

thorn0

10.6k6 gold badges71 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

georgeawg Over a year ago

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.

thorn0 Over a year ago

@georgeawg Tried it (plnkr) with different old versions. You're right. It's been changed in 1.6.5.

georgeawg · Accepted Answer · 2018-07-24 13:24:38Z

0

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

edited Jul 24, 2018 at 13:24

georgeawg

49k13 gold badges77 silver badges98 bronze badges

answered Jul 24, 2018 at 13:09

Anusha kurra

4803 silver badges9 bronze badges

2 Comments

Anusha kurra Over a year ago

Pls accept and upvote it if you found the answer helpful

Vani.Ashireddy Over a year ago

I don't have enough reputation points to upvote , although i upvoted

Community · Accepted Answer · 2020-06-20 09:12:55Z

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

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>

Collectives™ on Stack Overflow

how to bind default value to select using ng-model using AngularJS V1.6

3 Answers 3

2 Comments

2 Comments

The DEMO

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Linked

Related